¿Necesitas dar profundidad y realismo a tus elementos web? Este generador de sombras CSS te permite crear efectos de box-shadow personalizados con control total sobre desplazamiento, desenfoque, expansión y color. Perfecto para diseñadores web y desarrolladores frontend que buscan efectos modernos como neón, sombras suaves o efectos interiores.
✓ Control de desplazamiento X/Y ✓ Desenfoque ajustable ✓ Expansión personalizable ✓ Sombra interior (inset) ✓ Opacidad configurable ✓ Múltiples sombras ✓ Vista previa en tiempo real
Crea sombras personalizadas para elementos web. Ajusta desplazamiento, desenfoque, tamaño y color. Copia el código CSS listo para usar.
* Los cambios se actualizan en tiempo real
Elemento con sombra
No hay sombras guardadas
Box-shadow es una propiedad CSS que permite añadir sombras a elementos HTML. Puedes controlar el desplazamiento horizontal/vertical, el desenfoque, la expansión y el color de la sombra.
Ajusta los controles para definir desplazamiento X/Y, desenfoque, expansión y color. La vista previa se actualiza en tiempo real. Luego copia el código CSS generado.
El blur (desenfoque) controla cuán difusa es la sombra. El spread (expansión) controla cuánto crece o encoge la sombra antes del desenfoque.
La propiedad inset cambia la sombra de exterior a interior, creando un efecto de profundidad hacia adentro del elemento, como si estuviera hundido.
Sí, puedes aplicar múltiples sombras separadas por comas. Este generador te permite añadir sombras adicionales para crear efectos más complejos.