Una sombra en CSS es un efecto visual de profundidad o separación que se proyecta alrededor de una caja.
Sintaxis de box-shadow
La propiedad box-shadow tiene una sintaxis que intimida un poco la primera vez, porque acepta varios valores seguidos.
.tarjeta {
/* x | y | difuminado | expansión | color */
box-shadow: 0 8px 24px 0 rgb(0 0 0 / 15%);
}
Vamos a separarlo con calma:
- Desplazamiento X: mueve la sombra a derecha o izquierda.
- Desplazamiento Y: mueve la sombra hacia abajo o hacia arriba.
- Blur: controla cuánto se difumina.
- Spread: expande o contrae el tamaño de la sombra.
- Color: normalmente se usa un negro con transparencia.
Un valor típico para una tarjeta podría ser este:
.card {
background: white;
border-radius: 12px;
box-shadow: 0 12px 30px rgb(15 23 42 / 12%);
}
Fijaos en que la sombra no es negra opaca. Es un color oscuro con poca opacidad. Las sombras realistas suelen ser suaves, porque en el mundo real la luz no dibuja bloques negros perfectos alrededor de las cosas.
Sombras interiores con inset
Si añadimos la palabra inset, la sombra se dibuja hacia dentro del elemento.
.campo-hundido {
box-shadow: inset 0 2px 6px rgb(0 0 0 / 20%);
}
Un ejemplo más útil sería un campo de formulario con una sombra interior muy sutil.
input {
border: 1px solid #cccccc;
border-radius: 6px;
box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%);
}
Usad inset con moderación. Si os pasáis, el diseño puede parecer una interfaz de hace quince años, con botones hundidos por todas partes y olor a panel de administración antiguo.
Varias sombras a la vez
box-shadow permite declarar varias sombras separadas por comas. Esto sirve para crear efectos más naturales.
.tarjeta-elevada {
box-shadow:
0 2px 6px rgb(0 0 0 / 8%),
0 16px 32px rgb(0 0 0 / 12%);
}
La primera sombra define el contacto cercano con el fondo. La segunda crea una elevación más amplia. Juntas dan una sensación de profundidad más creíble que una sombra enorme y solitaria.
Borde o sombra, cuándo usar cada uno
No siempre necesitamos ambas cosas. A veces un borde suave es suficiente. Otras veces una sombra funciona mejor.
- Usad bordes para separar elementos en interfaces densas, formularios, tablas y paneles.
- Usad sombras para sugerir elevación, tarjetas flotantes, menús desplegables y modales.
- Usad ambos con cuidado cuando queráis una tarjeta muy definida pero todavía ligera.
Los bordes y sombras son de esas herramientas que conviene usar con bastante criterio. Bien aplicadas hacen que una interfaz se entienda mejor. Mal aplicadas convierten la página en una colección de pegatinas flotantes.
