Generador de box-shadow

Qué es un generador de box-shadow

Te da controles para los cuatro números que acepta una sombra CSS —desplazamiento horizontal, desplazamiento vertical, radio de desenfoque y extensión—, más un color, y escribe la declaración. Añade más sombras y se apilan: así se construyen las sombras suaves y en capas de las interfaces actuales.

Este además te dice qué significa el radio de desenfoque, porque no significa lo que su nombre sugiere. El panel bajo la vista previa convierte tu desenfoque en el número que el motor está usando realmente, y en la distancia a la que tu sombra seguirá pintando.

Todo se ejecuta en tu navegador. No se sube nada y no hay cuenta.

Cómo usar el generador

1. Fija los cuatro números. El desplazamiento mueve la sombra, el desenfoque suaviza su borde y la extensión agranda o encoge la forma antes de cualquier desenfoque. Una extensión negativa es como se consigue una sombra ceñida bajo una tarjeta sin halo alrededor.
2. Añade capas si quieres profundidad. La profundidad de verdad suele venir de dos o tres sombras con desenfoques distintos, no de una grande. Ten en cuenta que las sombras se pintan con la primera encima, al revés de como se lee la lista.
3. Lee el panel y copia. Muestra la desviación típica gaussiana a la que corresponde tu desenfoque, hasta dónde sigue pintando la sombra y el valor de filter: blur() que se vería igual. El bloque de CSS está listo para pegar.

Un radio de desenfoque de 20px no son 20px de desenfoque

La especificación de CSS es concreta en esto, y casi ningún generador lo repite. En la sección sobre el desenfoque de los bordes de sombra, CSS Backgrounds and Borders Level 3 dice que la sombra renderizada debe aproximar —con cada píxel dentro de un 5% de su valor exacto— la imagen que se obtendría aplicando un desenfoque gaussiano cuya desviación típica es la mitad del radio de desenfoque.

Así que `box-shadow: 0 0 20px` es una gaussiana con desviación típica de 10. El radio de desenfoque son dos sigmas. Y no es un detalle si además usas filtros, porque `filter: blur(20px)` toma directamente una desviación típica: el mismo número, la misma palabra y el doble de suavizado. Para reproducir un `filter: blur(N)` con una sombra necesitas un radio de 2N, y esta herramienta lo comprueba como identidad exacta a cada distancia, no como una aproximación.

De las matemáticas salen dos consecuencias útiles. Desenfocar un borde recto con una gaussiana da una función error, y una función error pasa exactamente por la mitad en el escalón. Así que una sombra desenfocada queda justo al 50% del alfa de su color a lo largo del contorno que dibujaste, no a plena intensidad. La mitad del desenfoque cae dentro de la forma y la mitad fuera, y por eso subir el desenfoque nunca agranda una sombra: vuelve el borde más difuso y, en el borde, más claro. Agrandar una sombra es lo que hace la extensión, y las dos cosas se confunden constantemente.

La segunda consecuencia es la que provoca errores. Una gaussiana tiene colas, así que una sombra no se detiene en su radio de desenfoque. Calcular dónde cae el alfa por debajo de un paso de 8 bits —el punto pasado el cual ya no puede dibujarse nada— da alrededor de 1,33 veces el radio, en todas las direcciones y a cualquier tamaño. Un desenfoque de 20px sigue pintando algo a 27px. Si un contenedor tiene overflow hidden y tu sombra parece recortada aunque los números encajaran, esa proporción es el motivo.

Nada de esto hace que una sombra se vea mal; la hace predecible. La razón para conocer la desviación típica es que es el número en el que se expresa cualquier otro desenfoque del entorno —filtros SVG, sombras de canvas, herramientas de diseño— y box-shadow es la excepción por duplicarlo.

Limitaciones honestas

La vista previa es un elemento real con un box-shadow real, así que lo que ves lo dibuja tu propio navegador. Las cifras del panel se calculan a partir de la especificación, no se miden en los píxeles: la especificación permite un 5% por píxel, de modo que un navegador puede desviarse algo de la gaussiana ideal, y algunos lo hacen, sobre todo con radios muy grandes donde aproximan con desenfoques de caja repetidos.

El panel de análisis describe la primera sombra de la lista. Con varias capas las matemáticas se aplican a cada una por separado y luego se componen, algo que un único número no puede resumir con honestidad, así que la herramienta no lo finge.

El alcance se calcula para un borde recto. En una esquina la sombra es el desenfoque de una forma curva, de modo que la caída es algo distinta, y en una sombra interior toda la geometría se invierte. La cifra del borde recto es la adecuada para la pregunta práctica —cuánto espacio necesita esto— y no es exacta en las esquinas.

El lenguaje de diseño de este sitio prohíbe las sombras por completo, y eso no ha cambiado: el recuadro de la vista previa es la única sombra de esta página y el resto es plano a propósito. La regla afecta a nuestras páginas, no a una herramienta hecha para las de otros. Vale la pena decir que una sombra suele ser el instrumento equivocado de todos modos: un borde de un píxel o un fondo con matiz transmiten la misma jerarquía sin el coste de render ni el halo.

El motor lleva 40 comprobaciones. Como JavaScript no tiene función error, hubo que escribir una, y se contrasta con la biblioteca estándar de Python en 1207 puntos con un error máximo por debajo de 1e-7, junto a un control que confirma que una función errónea de aspecto plausible no supera ese listón. El arnés ejecuta él mismo el oráculo de Python en vez de pedir un paso previo, después de que la primera versión omitiera esa comparación en silencio en Windows porque Git Bash y Node no coinciden en dónde está /tmp.

¿Por qué es gratis?

Cuatro controles y una función error son trabajo que tu propia máquina hace al instante. No se sube nada, no hay cuenta y no hay nada que marcar con agua.

Si lo que quieres son esquinas y no sombras, el generador de border-radius de este sitio está al lado, y tiene una historia parecida sobre una regla de la especificación que nadie enseña.