Generador de sombras CSS suaves (box-shadow en capas)

Sombras CSS suaves: por qué apilar varias capas

Una sola sombra CSS se ve plana y dura. Al apilar de 3 a 8 sombras cuyo desplazamiento y desenfoque crecen según una curva se imita la difusión real de la luz. Cada capa lleva una fracción de la opacidad total.

Fórmula

Para la capa i de N, con f = i / N y p = curva(f): desplazamiento vertical = distancia × p, desenfoque = desenfoque final × p, opacidad = opacidad total / N. La curva vale f (lineal), f² (ease-in) o 1 − (1 − f)² (ease-out).

Ejemplo

5 capas, distancia 32 px, desenfoque 64 px, opacidad 40 %, curva ease-out: los desplazamientos son 12, 20, 27, 31 y 32 px, los desenfoques 23, 41, 54, 61 y 64 px, y cada capa tiene una opacidad de 0,08.

• Lineal: progresión regular.
• Ease-in: sombra ceñida junto a la tarjeta, difusa a lo lejos.
• Ease-out: sombra amplia desde las primeras capas.

Límites

Muchas capas con gran desenfoque cuestan tiempo de renderizado en móvil: quédese en 5 capas en páginas con muchas tarjetas. La sombra se genera solo hacia abajo; una sombra lateral exige añadir a mano un desplazamiento horizontal.

Fuentes y fechas: la propiedad CSS box-shadow admite varias sombras separadas por comas, que es la base del efecto. El reparto de desplazamientos, desenfoques y opacidad por capa sigue un método propio de la herramienta (curvas lineal, ease-in, ease-out), no una norma: es un ajuste estético orientativo, no un valor con fuente. La sintaxis shadow-[…] de Tailwind con guiones bajos en lugar de espacios es la notación de valores arbitrarios de Tailwind CSS (verificado el 14/10/2026)

Preguntas frecuentes

¿Cómo hacer una sombra CSS suave y realista?

Superponga de 4 a 6 box-shadow cuyo desplazamiento y desenfoque se duplican aproximadamente en cada capa, con baja opacidad (0,04 a 0,1 por capa). La opacidad total se mantiene en torno a 0,2-0,4.

¿Cuántas capas de sombra conviene usar?

De 3 a 6 capas bastan en la mayoría de los casos. Por encima de 8, la mejora visual es casi nula y el renderizado cuesta más en móvil.

¿Cómo usar esta sombra con Tailwind CSS?

Use la sintaxis de valor arbitrario shadow-[…] sustituyendo cada espacio por un guion bajo (_). El generador produce directamente la clase lista para pegar en su HTML.

¿La herramienta es realmente gratuita?

Sí, todas las herramientas en Kristools son 100% gratuitas y accesibles sin registro.

¿Están protegidos mis datos?

Sí. Todo el procesamiento se realiza de forma segura y directa en tu navegador. No se envían datos personales a nuestros servidores.