La forma habitual de añadir una sombra es un único box-shadow con algo de desenfoque y un color gris medio. Funciona, pero a menudo se ve anticuado y artificial. En el mundo real las sombras no son uniformes: son oscuras y nítidas junto al objeto y se desvanecen en una bruma suave y amplia más lejos. Puedes imitarlo apilando varias sombras, y el resultado marca la diferencia entre una interfaz plana y una que se siente física.
Por qué una sola sombra se ve falsa
Una sola sombra tiene un único valor de desenfoque, así que es nítida o suave, nunca ambas. Una sombra ajustada se ve dura y parece una pegatina, mientras que una muy amplia parece una mancha vaga que no conecta el elemento con la superficie. La luz real crea ambos efectos a la vez: un componente ambiental y difuso, y otro directo y nítido.
La técnica de capas
La idea es combinar dos o más sombras, cada una duplicando el desenfoque y el desplazamiento vertical de la anterior y manteniendo baja la opacidad:
.card {
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.08),
0 2px 2px rgba(0, 0, 0, 0.08),
0 4px 4px rgba(0, 0, 0, 0.08),
0 8px 8px rgba(0, 0, 0, 0.08),
0 16px 16px rgba(0, 0, 0, 0.08);
}
Cada capa es tenue por sí sola, pero juntas producen una caída suave y gradual mucho más cercana a la luz natural. No necesitas cinco capas para cada elemento. Dos o tres suelen bastar, y menos capas significan menos trabajo de pintado para el navegador.
Una receta práctica de dos capas para una tarjeta:
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 12px 32px rgba(0, 0, 0, 0.1);
La sombra pequeña ancla la tarjeta a la superficie, mientras que la grande sugiere altura.
Piensa en niveles de elevación
Los sistemas de diseño suelen definir un conjunto pequeño de niveles de elevación, como reposo, elevado y flotante, y asignan una sombra a cada uno. Cuanto más alto está el elemento, mayor es el desplazamiento y el desenfoque y más suave la sombra:
- Nivel 1, reposo: bordes sutiles y tarjetas apoyadas en la página.
- Nivel 2, elevado: estados hover y encabezados fijos.
- Nivel 3, flotante: menús desplegables y ventanas emergentes.
- Nivel 4, superposición: cuadros de diálogo modales.
Definirlos una vez como variables mantiene consistente toda la interfaz y facilita los cambios.
:root {
--shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
--shadow-3: 0 10px 24px rgba(0, 0, 0, 0.14), 0 3px 6px rgba(0, 0, 0, 0.1);
}
Mantén una sola fuente de luz
Si la sombra de una tarjeta cae hacia abajo y a la derecha, todas las demás sombras de la página deberían hacerlo igual. Las direcciones mezcladas confunden a la vista. La mayoría de las interfaces suponen luz desde arriba, así que usa un desplazamiento vertical positivo y uno horizontal de cero o muy pequeño.
Tiñe tus sombras
Las sombras negras puras pueden verse sucias, sobre todo en fondos de color. Una sombra que sea una versión oscura y saturada del color de fondo se ve más natural. Sobre un fondo azul, prueba un azul marino profundo con algo de transparencia en lugar de negro. En superficies blancas, un gris oscuro frío con un toque de azul suele sentirse más limpio que el negro neutro.
El modo oscuro necesita sombras distintas
Las sombras son casi invisibles sobre fondos oscuros, porque no puedes oscurecer lo que ya es oscuro. En los temas oscuros, la profundidad suele mostrarse haciendo que las superficies elevadas sean ligeramente más claras que el fondo, con un borde sutil o un resalte interior, y usando sombras más fuertes solo donde sea necesario.
Un resalte inset en el borde superior puede añadir un toque agradable de realismo:
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 8px 24px rgba(0, 0, 0, 0.5);
Errores comunes
- Usar una opacidad alta. La mayoría de las buenas sombras tienen entre 5 y 25 por ciento de opacidad.
- Usar la misma sombra en todos los tamaños. Un modal grande necesita más desenfoque que una etiqueta pequeña.
- Animar sombras grandes en muchos elementos a la vez, lo que puede provocar tirones al desplazarse.
- Añadir sombras a todo. Cuando todos los elementos flotan, ninguno destaca.
Experimenta de forma visual
Ajustar a mano dos o tres capas de sombra es más fácil cuando puedes ver el efecto de inmediato. Usa el generador de box shadow para afinar una capa, cópiala y luego combina las capas en tu hoja de estilos. Compara el resultado con una sola sombra para ver la diferencia de realismo. Un poco de sutileza rinde mucho y tu interfaz se sentirá más refinada.