Generador de box-shadow CSS
Genera una sombra CSS box-shadow con vista previa en vivo y código listo para copiar.
🔒 100 % en el cliente — no se envía ningún dato
Genera una sombra CSS box-shadow con vista previa en vivo y obtén el código listo para copiar en tu proyecto. Ajusta el desplazamiento, el desenfoque, la extensión, el color y el inset para crear efectos de profundidad pulidos. Todo se calcula en tu navegador, sin registro y sin enviar datos.
FAQ
¿Cómo funciona la propiedad box-shadow?
box-shadow toma un desplazamiento horizontal y vertical, un radio de desenfoque, una extensión y un color, por ejemplo: box-shadow: 4px 4px 10px 0 rgba(0,0,0,0.2);
¿Cómo creo una sombra interior (inset)?
Añade la palabra clave inset antes de los valores de la sombra para proyectarla dentro del elemento en lugar de fuera.
¿Puedo aplicar varias sombras a un mismo elemento?
Sí, solo tienes que separar cada sombra con una coma en la misma declaración box-shadow para superponerlas.
¿Cuál es la diferencia entre blur y spread?
El blur suaviza los bordes de la sombra, mientras que el spread aumenta o reduce su tamaño antes de aplicar el desenfoque.