Generador de box-shadow CSS
Crea sombras CSS complejas y modernas usando un editor visual basado en capas.
Capas
Capa Activa (1)
Código Resultante
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
shadow-[0px_4px_10px_0px_rgba(0,_0,_0,_0.2)]
boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.2)"
Sombras Perfectas en 3 Pasos
Añade Capas
No te conformes con una sola sombra. Añade múltiples capas para crear profundidad realista y suavidad.
Ajusta
Controla X, Y, Blur y Spread para cada capa. Juega con la opacidad para efectos sutiles.
Copia CSS
Obtén el código CSS listo para pegar. Compatible con todos los navegadores modernos.
¿Por qué usar Sombras por Capas?
En el mundo real, las sombras no son bloques
sólidos. Se difuminan y dispersan. Usar una sola box-shadow en CSS a menudo se ve artificial y plano.
Al apilar múltiples sombras con diferentes niveles de opacidad y desenfoque, logras ese efecto "suave y premium" que ves en los diseños modernos.