Aplicas un box-shadow con un valor de blur alto para simular una sombra suave y realista, y el resultado se ve plano y artificial, nada parecido a cómo se comportan las sombras en el mundo real. El problema no es la propiedad CSS: es que una sombra realista casi nunca es una sola capa, es la superposición de varias.
Por qué una sombra real tiene múltiples capas
En el mundo físico, la sombra de un objeto tiene un borde más definido cerca del objeto y se difumina progresivamente cuanto más se aleja, además de tener distinta intensidad según la distancia a la fuente de luz. Una sola declaración de box-shadow con un blur fijo no puede capturar esa variación gradual: produce un único nivel de difuminado uniforme. Combinar varias capas de sombra, cada una con su propio offset, blur y opacidad, permite aproximar mucho mejor ese comportamiento gradual real.
Los parámetros de cada capa, explicados
- Offset (X, Y): el desplazamiento horizontal y vertical de la sombra respecto al elemento.
- Blur: cuánto se difumina el borde de la sombra; a mayor valor, más suave y extendido el degradado.
- Spread: cuánto se expande o contrae la sombra respecto al tamaño original del elemento.
- Color y opacidad: el color de la sombra y su nivel de transparencia, clave para simular sombras suaves que no bloquean completamente el fondo.
- Inset: si está activado, la sombra se proyecta hacia dentro del elemento en vez de hacia fuera, útil para efectos de profundidad "hundida".
Cómo crear una sombra con múltiples capas
- Añade una primera capa con offset, blur, spread, color y opacidad.
- Añade capas adicionales, cada una simulando un nivel distinto de la sombra (por ejemplo, una capa cercana con blur bajo y otra más lejana con blur alto y menos opacidad).
- Ajusta cada capa viendo la vista previa en vivo hasta conseguir el efecto deseado.
- Copia el CSS generado, con todas las capas ya combinadas en una sola propiedad
box-shadow.
Puedes hacerlo gratis con el generador de CSS Box Shadow de esta web, con vista previa en vivo.
Un patrón habitual: dos o tres capas con distinta intensidad
Un patrón común para sombras realistas es combinar una capa cercana (offset pequeño, blur bajo, opacidad más alta) que da definición inmediata al elemento, con una o dos capas más lejanas (offset mayor, blur alto, opacidad más baja) que dan la sensación de profundidad y difuminado gradual. El resultado combinado se percibe mucho más natural que una sola capa con un blur intermedio forzado a cumplir ambos roles a la vez.
Casos de uso: más allá de la sombra bajo una tarjeta
- Efecto de elevación (elevation): dar sensación de que un elemento "flota" sobre el fondo, común en interfaces con tarjetas.
- Resplandor (glow): usando colores vivos con blur alto en vez de negro, para efectos de neón o énfasis luminoso.
- Sombras internas (inset): simular que un elemento está hundido o presionado, útil en botones o campos de formulario activos.
Preguntas frecuentes
¿Cuántas capas debería usar como máximo? No hay un límite técnico estricto, pero 2-3 capas suelen ser suficientes para un efecto realista sin complicar innecesariamente el CSS.
¿El inset se puede combinar con sombras normales en el mismo elemento? Sí, puedes tener capas con y sin inset en la misma declaración de box-shadow.
¿Esto afecta al rendimiento de la página? Las sombras CSS son ligeras en términos de rendimiento comparadas con imágenes; múltiples capas no suelen ser un problema salvo en casos extremos con muchísimos elementos animados simultáneamente.
¿Se guarda mi configuración en algún servidor? No, todo el diseño ocurre en tu navegador.
Crea sombras CSS realistas con múltiples capas gratis con el generador de CSS Box Shadow, con vista previa en vivo.