Generador de box-shadow CSS
Crea una box-shadow moviendo controles y viendo el resultado en una tarjeta. Apila hasta seis capas para sombras más suaves y realistas, usa inset para efectos de pulsado y parte de plantillas como suave, flotante, resplandor o neumorfismo. Copia el CSS con un clic.
Cómo usarla
- Elige una plantilla o ajusta el desplazamiento, el desenfoque, la extensión, el color y la opacidad de la sombra.
- Añade capas con + y selecciona cada una para editarla; cambia el fondo, el color de la caja y el radio de las esquinas para que combine con tu diseño.
- Copia el CSS y pégalo en la regla del elemento.
Preguntas frecuentes
¿Qué hacen el desenfoque y la extensión?
El desenfoque suaviza el borde de la sombra; con cero, el borde es nítido. La extensión agranda la sombra en todas las direcciones antes de desenfocar, y una extensión negativa la reduce, lo que ayuda a que una sombra grande y desenfocada quede bajo el elemento.
¿Por qué usar varias capas de sombra?
Las sombras reales son más oscuras cerca del objeto y se desvanecen más lejos. Combinar una sombra pequeña y nítida con otra más grande y suave lo imita y queda más natural que una sola sombra. La primera capa de la lista se dibuja encima.
¿Ralentiza box-shadow una página?
No en un uso normal. Desenfoques muy grandes en muchos elementos, o animar la propia sombra, pueden costar rendimiento en móviles lentos; para animar, cambia mejor la opacidad de un pseudoelemento que tenga la sombra.
🏷️ Generador de meta tags
🖼️ Generador de Open Graph
🔗 Generador de enlaces UTM
🌈 Generador de degradados CSS