Generador de Box Shadow CSS
Crea hermosas sombras CSS con editor visual. Agrega múltiples sombras, efectos inset, blur, spread y color. Vista previa en vivo con copia instantánea. Generador gratuito.
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08); border-radius: 16px;
Preguntas Frecuentes
Can I use multiple shadows?
Yes! You can add up to 4 shadow layers for complex, realistic depth effects. Layered shadows are a key technique in modern UI design (Material Design, Apple HIG).
What is an inset shadow?
An inset shadow appears inside the element instead of outside, creating a pressed or recessed effect. Useful for input fields, buttons, and card inner borders.
Cómo Usar
Choose Preset
Start with a preset or adjust shadow parameters manually.
Adjust Values
Control X/Y offset, blur, spread, color, and opacity with sliders.
Copy CSS
Copy the generated CSS code to use in your project.
Herramientas relacionadas
Generador de degradados CSS
Crea degradados CSS hermosos con editor visual. Soporta degradados lineales, radiales y cónicos. Copia código CSS al instante. Generador de degradados CSS gratuito.
Generador de paletas de colores
Genere paletas de colores armoniosas. Armonías complementarias, triádicas, análogas. Valores HEX, RGB, HSL.
Convertidor de Colores
Convierte colores entre formatos HEX, RGB, HSL y CMYK al instante. Selector y convertidor gratuito para diseñadores y desarrolladores — sin registro, sin carga de archivos.
Embellecedor y minificador CSS
Embellezca o minifique código CSS en línea. Formatee CSS con sangría y espaciado adecuados, o comprima para producción más rápida. Formateador CSS gratuito en navegador — sin registro, instantáneo.
Minificador CSS
Minifica código CSS en línea para reducir el tamaño del archivo y mejorar la velocidad. Elimina comentarios y espacios. Minificador CSS gratuito, sin carga, resultados instantáneos.