Generador de Sombras CSS

Anatomía de la propiedad box-shadow

Una box-shadow individual es una lista de valores en un orden fijo: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque (blur), radio de expansión (spread) y color, con una palabra clave inset opcional. Solo los dos desplazamientos y el color son obligatorios; el blur y el spread tienen un valor por defecto de cero. Así, la forma abreviada que se lee como 0px 4px 12px rgba(0, 0, 0, 0.15) significa: sin movimiento horizontal, cuatro píxeles hacia abajo, doce píxeles de desenfoque, sin expansión y un negro al 15 por ciento. Los deslizadores de esta herramienta escriben exactamente esa cadena por ti, pero entender el orden hace que editar a mano sea indoloro.

Los desplazamientos colocan la sombra en relación con la caja. Un desplazamiento vertical positivo mueve la sombra hacia abajo, que es lo que quieres para la ilusión habitual de una fuente de luz situada encima del elemento; un valor negativo la eleva. El desplazamiento horizontal funciona igual de izquierda a derecha. Los desplazamientos son la mayor pista que usa tu cerebro para juzgar a qué altura flota un elemento, así que recurre a ellos antes que a cualquier otra cosa.

Blur y spread: los dos radios que la gente confunde

El radio de desenfoque (blur) controla lo suave que es el borde. En cero obtienes un duplicado de la caja con bordes nítidos; a medida que el blur crece, la sombra se desvanece a lo largo de una banda más ancha y se parece más a la luz difusa real. La mayoría de las sombras naturales usan un desenfoque que es aproximadamente entre dos y tres veces el desplazamiento vertical. Ten en cuenta que el blur no puede ser negativo.

El spread es el valor que casi nadie ajusta, y es potente. Un spread positivo infla la sombra hacia afuera en todas las direcciones antes de aplicar el desenfoque, haciéndola más grande que la caja; un spread negativo la encoge. Un spread negativo diminuto combinado con un desplazamiento hacia abajo y un desenfoque generoso es la receta clásica para una sombra que se ciñe bien por debajo de una tarjeta en lugar de escaparse por los lados. El spread es además la manera de dibujar un anillo sólido: desplazamiento cero, blur cero, unos pocos píxeles de spread positivo y un color plano.

Sombras inset para superficies presionadas y hundidas

Añadir la palabra clave inset dibuja la sombra dentro del elemento en lugar de detrás de él, de modo que la superficie parece tallada hacia adentro. Así es como haces que un campo de texto parezca un pozo, que un interruptor parezca presionado o que un panel parezca embutido en la página. Ahora los desplazamientos apuntan hacia el borde interior que recibe la sombra, así que un desplazamiento hacia abajo oscurece el borde interior superior, imitando la luz que cae desde arriba. Activa la opción Inset en esta herramienta para alternar entre una sombra exterior y una interior, y observa cómo los mismos números invierten su significado.

Superposición de varias sombras

La propiedad box-shadow acepta una lista separada por comas, y el navegador pinta cada sombra en orden, con la primera arriba. Este es el truco más útil para conseguir profundidad realista. Los objetos reales no proyectan una sola sombra; proyectan una sombra de contacto ceñida y más oscura justo bajo el borde, y una sombra ambiental más ancha y tenue más alejada. Apilar una sombra pequeña de bajo desenfoque sobre otra grande de alto desenfoque reproduce eso, y el resultado se percibe como mucho más creíble de lo que puede lograr cualquier sombra única.

La superposición es también la forma en que los sistemas de diseño construyen escalas de elevación: la elevación al estilo Material suele ser de dos o tres sombras apiladas afinadas en conjunto, y subir una tarjeta un nivel intercambia toda la pila en lugar de retocar un solo número. Incluso puedes mezclar una sombra inset con sombras hacia afuera en la misma declaración para obtener a la vez un borde iluminado y una sombra proyectada.

Ejemplo resuelto: una sombra suave de tarjeta

Aquí tienes una receta que queda bien en casi cualquier superficie clara. Empieza sin desplazamiento horizontal para que la sombra quede centrada, con un desplazamiento vertical de unos 8px, un desenfoque de aproximadamente 24px y un spread de alrededor de menos 6px para que se meta bajo la tarjeta. Usa un color casi negro pero baja la opacidad a un 12 por ciento, expresado como rgba(0, 0, 0, 0.12). El spread negativo evita que el borde suave se desborde más allá de las esquinas, la baja opacidad impide que parezca un manchón y el desplazamiento moderado sugiere una luz cenital suave. Para un resultado extranítido, superpón una segunda sombra con un desplazamiento de 1px, un desenfoque casi nulo y un negro de aproximadamente el 6 por ciento para fingir una línea de contacto marcada.

Errores comunes y cómo evitarlos

El error más frecuente es una sombra negra pura y totalmente opaca con mucho desenfoque, que se percibe turbia y artificial en lugar de como luz. Los fondos de color lo empeoran: una sombra negra sobre un azul saturado parece sucia, así que tinta la sombra hacia el tono del fondo en su lugar. Otro error es tratar el spread como un segundo control de desenfoque; no lo es, y dejarlo en cero mientras subes el blur es la razón por la que algunas sombras se sienten a la vez borrosas y demasiado pequeñas.

La gente también confunde box-shadow con el filtro drop-shadow. box-shadow siempre sigue la caja rectangular del elemento, incluido su border-radius, así que un PNG transparente dentro de la caja igualmente recibe una sombra rectangular. El filtro drop-shadow traza los píxeles realmente no transparentes, que es lo que quieres para formas irregulares e imágenes recortadas. Usa box-shadow para tarjetas, botones y paneles; recurre al filtro cuando la silueta no sea un rectángulo.

Rendimiento y la trampa del desenfoque grande

Las sombras las pinta el navegador, y los radios de desenfoque muy grandes son realmente costosos, sobre todo cuando se animan o aparecen en muchos elementos a la vez. Animar el blur o el spread de una sombra grande puede provocar repintados en cada fotograma y tirones en dispositivos de gama baja. Si necesitas que una sombra crezca al hacer hover, un enfoque más fluido es prerrenderizar la sombra más grande en un pseudoelemento y animar su opacidad en su lugar, ya que la opacidad es barata de componer. Mantén los valores de desenfoque razonables, evita cientos de nodos con sombra en pantalla a la vez y tus interfaces se mantendrán fluidas.