Las sombras son una de las formas más rápidas de hacer que una interfaz se sienta tangible. Una tarjeta que proyecta una sombra suave parece flotar sobre la página, un botón presionado parece hundirse y un campo con el foco parece brillar. En CSS todo esto lo controla una sola propiedad, box-shadow, que es fácil de empezar a usar y sorprendentemente flexible cuando conoces sus partes.
La sintaxis
Una sombra se escribe como una lista de valores:
box-shadow: desplazamiento-x desplazamiento-y desenfoque extension color;
Por ejemplo:
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25);
Solo los dos primeros valores son obligatorios. El radio de desenfoque, el radio de extensión y el color son opcionales, y puede añadirse la palabra clave inset al inicio o al final.
Los valores, uno por uno
Desplazamiento horizontal. Un número positivo mueve la sombra a la derecha y uno negativo a la izquierda. Cero la centra horizontalmente.
Desplazamiento vertical. Un número positivo mueve la sombra hacia abajo y uno negativo hacia arriba. La mayoría de las sombras de aspecto natural tienen un pequeño desplazamiento vertical positivo, porque esperamos que la luz venga de arriba.
Radio de desenfoque. Cero produce una sombra de borde duro y los números altos suavizan y extienden el borde. No puede ser negativo. Los desenfoques más grandes y suaves resultan más realistas en elementos que parecen estar lejos de la superficie.
Radio de extensión. Expande o reduce la sombra antes de desenfocarla. Un valor positivo la hace más grande que el elemento y uno negativo más pequeña. La extensión negativa combinada con un desplazamiento vertical es el truco clásico para una sombra que aparece solo debajo de un elemento y no por todos los lados.
Color. Funciona cualquier color CSS, pero los colores semitransparentes se ven mejor porque la sombra adopta un matiz de aquello sobre lo que cae. Si omites el color, los navegadores usan el color de texto actual.
Inset. Añadir inset dibuja la sombra dentro de la caja en lugar de fuera, lo que hace que el elemento parezca hundido, como un campo de entrada o un botón presionado.
Ejemplos prácticos
Una sombra sutil para una tarjeta:
.card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
Una tarjeta elevada al pasar el cursor:
.card:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
Una sombra solo en el borde inferior:
.panel {
box-shadow: 0 10px 10px -8px rgba(0, 0, 0, 0.4);
}
Un botón presionado con inset:
.button:active {
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
}
Un anillo de enfoque que no altera el diseño:
.input:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.45);
}
Una sombra con desenfoque cero y extensión positiva actúa como un contorno que sigue el radio de borde del elemento y, a diferencia de un borde, no cambia el tamaño de la caja.
Varias sombras
Puedes separar varias sombras con comas. Se pintan de adelante hacia atrás, así que la primera de la lista queda encima.
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.1),
0 8px 24px rgba(0, 0, 0, 0.12);
Combinar una sombra ajustada y más oscura con una grande y ligera es el secreto detrás de la mayoría de las profundidades pulidas en las interfaces. El siguiente artículo de esta serie explora esa técnica.
Las sombras siguen al border-radius
Si un elemento tiene esquinas redondeadas, su sombra se redondea con él automáticamente. Por eso importa ajustar el radio de esquina en la vista previa al diseñar una tarjeta.
Rendimiento y accesibilidad
Los radios de desenfoque grandes pueden ser costosos de pintar, sobre todo en elementos que se animan o se desplazan. Si animas una sombra, considera animar la opacidad de un pseudoelemento que contenga la sombra mayor en lugar de animar box-shadow. Recuerda también que las sombras son decoración: nunca dependas solo de ellas para transmitir un estado. Combina una sombra de foco con un contorno visible y, en modo de alto contraste, asegúrate de que los bordes sigan identificando los controles.
Construye y previsualiza de forma visual
Escribir números a ciegas es lento. Mueve los controles del generador de box shadow para ajustar desplazamientos, desenfoque, extensión, color, opacidad e inset mientras ves el efecto en una vista previa en vivo, y luego copia la declaración final. Experimenta hasta que se sienta bien y mantén tus sombras consistentes en todo el proyecto para que la interfaz comparta una sola fuente de luz.