box-shadow toma cuatro longitudes y un color, y la forma más rápida de entender qué hace cada una es arrastrarla y mirar. La sintaxis es offset-x, offset-y, desenfoque, expansión, color, más la palabra clave opcional inset, que vuelca la sombra hacia dentro.
Una sombra no ocupa espacio alguno
Esta es la característica más útil de la propiedad y es fácil pasarla por alto. Una sombra se pinta, no se maqueta. Dale a un elemento una sombra con 80 píxeles de desenfoque y 80 de expansión —una sombra que se extiende 160 píxeles en todas direcciones— y el elemento de al lado no se mueve ni un píxel. Nada refluye, nada se desplaza.
Por eso box-shadow es la herramienta correcta para anillos de foco y estados hover, y border es la equivocada. Añadir un borde de 2px al pasar el ratón empuja dos píxeles todo lo que hay alrededor; añadir una sombra de 2px no. El viejo truco de aplicar de antemano un borde transparente para reservar el espacio se vuelve innecesario en cuanto recurres a una sombra.
El desenfoque no es el número que crees
El radio de desenfoque no es la desviación típica del desenfoque gaussiano: la especificación lo define como el doble. Un desenfoque de 12px produce una gaussiana con sigma 6. Esto importa justo cuando intentas cuadrar una sombra con un diseño hecho en Figma o Sketch, donde el valor de blur significa algo ligeramente distinto, y tu CSS sale siempre más suave o más ceñido que el mockup.
En la práctica significa que la sombra se desvanece a lo largo de aproximadamente el radio de desenfoque a cada lado del borde. Un desenfoque de 12px es una transición suave de unos 12 píxeles de ancho, y la extensión visible de la sombra es más o menos el desplazamiento más la expansión más el desenfoque.
La expansión es el parámetro que todos ignoran, negativa incluida
La expansión agranda o encoge la forma de la sombra antes de desenfocarla. La expansión positiva hace la sombra más grande que el elemento, lo que se lee como una fuente de luz más lejana. Hasta ahí, sencillo.
La expansión negativa es la interesante, y de ahí salen las sombras realistas. Un objeto cerca de una superficie proyecta una sombra ceñida y oscura justo debajo; uno lejano proyecta una grande y difusa. La elevación de verdad se parece a un desplazamiento pequeño con expansión negativa, no a un desenfoque grande. Una sombra 0 10px 10px -5px es más ceñida y más creíble que 0 10px 20px 0: la expansión negativa mete los bordes hacia dentro, así la sombra no se derrama por los lados desde debajo del elemento.
Una sola sombra rara vez queda bien, y esta herramienta hace una
El CSS te deja separar por comas tantas sombras como quieras en un solo elemento, y esa es la mayor diferencia entre una sombra que parece diseñada y otra que parece un valor por defecto del CSS. Los objetos reales no proyectan una sombra; proyectan una ceñida y oscura de contacto donde tocan la superficie, y otra más amplia y suave más allá.
Esta herramienta construye una sola sombra, que es la forma correcta de aprender qué hace cada parámetro. Cuando vayas a usarla, superpón dos o tres: algo como 0 1px 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06) se lee como profundidad de un modo que un único 0 4px 12px rgba(0,0,0,0.15) nunca acaba de lograr. Cada capa debería ser más grande y más transparente conforme se aleja.
Ya que estamos: las sombras son más convincentes cuando son una versión oscura del tono del fondo en lugar de negro puro. Las sombras negras sobre una superficie de color se ven grises y muertas, porque las sombras reales son zonas donde llega menos luz a una superficie que sigue teniendo su propio color.
No la animes
box-shadow no es una propiedad barata de animar. Cada fotograma obliga al navegador a repintar la sombra, y una sombra desenfocada es cara de rasterizar: anímala en una lista de tarjetas y notarás la caída de fotogramas en un móvil de gama media.
El arreglo estándar es poner la sombra en un pseudoelemento, colocarlo detrás de la tarjeta y animar la opacidad de ese elemento. Las animaciones de opacidad las gestiona el compositor y nunca tocan la fase de pintado, así que el coste es prácticamente cero por grande que sea la sombra. Es un poco de marcado extra a cambio de un hover fluido, y es la diferencia entre una interfaz que se siente sólida y otra que da tirones.
Preguntas frecuentes
¿Se envía algo a un servidor?
No. Esta herramienta está marcada como "client": la vista previa es tu propio navegador renderizando el CSS, y la regla generada se ensambla con los valores de los deslizadores en la página. No se transmite nada.
¿Cuál es la diferencia entre box-shadow y filter: drop-shadow?
box-shadow sigue la caja del elemento: un rectángulo, o uno redondeado si tienes border-radius. filter: drop-shadow sigue la forma visible real, transparencia incluida. Así que para un PNG con un logo recortado o un SVG irregular, box-shadow dibuja la sombra del rectángulo alrededor, que queda mal, y drop-shadow traza el contorno, que queda bien. Para tarjetas rectangulares normales, box-shadow es más barato y hace el mismo trabajo.
¿Por qué no se ve mi sombra inset?
Normalmente porque el elemento tiene un fondo pintado encima, o porque no tiene tamaño digno de mención. Una sombra inset se dibuja dentro de la caja de relleno, sobre el fondo pero bajo el contenido: si el elemento está vacío y no tiene altura, no hay nada sobre lo que dibujar. También conviene comprobar que no la hayas puesto en un elemento cuyo interior lo cubre por completo un hijo.
¿Puede una sombra seguir un border-radius?
Sí, automáticamente. box-shadow usa la forma de la caja de borde, así que un elemento redondeado obtiene una sombra redondeada sin trabajo extra. Es una de las razones por las que box-shadow es preferible a una imagen de sombra dibujada a mano: sigue siendo correcta cuando el radio cambia.
¿Cómo hago una sombra en un solo lado?
Despláza más de lo que desenfocas, y mete los lados con expansión negativa. Algo como 0 8px 6px -6px black produce una sombra que solo aparece bajo el elemento: la expansión negativa la estrecha más que la caja, el desplazamiento la empuja abajo y el desenfoque suaviza lo que queda. Intentarlo con un simple desplazamiento y sin expansión negativa siempre dejará la sombra asomando por los lados.