Generador de sombras CSS (box-shadow)
Ajusta una sombra con deslizadores y una vista previa en directo, y después copia el CSS. La opción superpuesta añade una sombra de contacto discreta para un resultado más natural y actual.
No necesita datos
Cómo se usa
- Ajusta el desplazamiento, el desenfoque, la extensión y la opacidad.
- Elige el color de la sombra.
- Activa la sombra interior o la superpuesta.
- Copia el CSS.
Cómo funciona
box-shadow admite un desplazamiento horizontal y otro vertical, un radio de desenfoque, un radio de extensión y un color. Una extensión negativa encoge la sombra y evita un «halo» pesado. Superponer una sombra ceñida y poco opaca debajo de otra más grande y suave imita la forma en que la luz real crea a la vez una sombra de contacto y una sombra ambiental.
Ejemplos
- Tarjeta
- 0px 12px 32px -8px rgba(15, 23, 42, 0.25)
Usos habituales
- Tarjetas, ventanas modales y menús desplegables
- Botones y estados al pasar el ratón
- Sistemas de diseño
Privacidad y seguridad
Esta herramienta no necesita ningún dato personal ni ningún archivo. Los resultados se generan en tu dispositivo. Cómo trata los archivos cada herramienta
Preguntas frecuentes
¿Las sombras afectan al rendimiento?
Las sombras grandes y muy desenfocadas salen caras al animarlas. Anima la opacidad de un pseudoelemento en lugar de la sombra en sí.
¿Puedo aplicarla a un texto?
Para el texto se usa text-shadow, que no tiene valor de extensión.
Última actualización: