Generador de Sombras CSS
Diseña sombras (box-shadow) con capas múltiples y copia el código CSS al instante.
Sombra 1
CSS
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.25);Generado en tu navegador — sin registro ni límites de uso.
Cómo funciona
Ajusta la posición, el desenfoque, la expansión, el color y la opacidad de la sombra mientras ves el resultado en tiempo real sobre una tarjeta de ejemplo. Puedes apilar varias sombras para lograr efectos más elaborados, como sombras suaves de varias capas.
Para qué se usa
- Crear la sombra de una tarjeta, botón o modal
- Lograr un efecto de profundidad con varias sombras superpuestas
- Probar sombras internas (inset) para efectos de hundido
Preguntas frecuentes
¿Puedo combinar varias sombras en un mismo elemento?+
Sí, puedes añadir hasta 4 capas de sombra; el CSS generado las combina en una sola propiedad box-shadow separadas por comas.
¿Qué es una sombra 'inset'?+
Es una sombra que se dibuja hacia adentro del elemento en vez de proyectarse hacia afuera, útil para efectos de hundido o de campo de texto.
¿Se guarda mi diseño en algún servidor?+
No. La sombra se genera completamente en tu navegador; nada se envía a ningún servidor.