Generador de box-shadow CSS
Funciona en tu dispositivo. No se envía nada.Todo funciona en tu navegador: no se envía nada a ningún sitio.
Empezar con
Capas
Desplazamiento horizontal
Desplazamiento vertical
Desenfoque
Expansión
Color
Código
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]Editar una sombra existente
Diseña sombras CSS con capas, inset y ajustes suaves, míralas en vivo y copia el CSS o una clase de Tailwind. Pega una sombra existente para editarla.
Crea la sombra que quieres a ojo, sin adivinar números. Empieza con un ajuste predefinido - suave, media, dura retro, suave en capas, flotante, interior, neumórfica o brillo - y luego afina el desplazamiento, el desenfoque, la expansión, el color, la opacidad y el inset de cada capa mientras la vista previa se actualiza. Una sombra puede tener hasta ocho capas, que es como se consiguen las sombras más naturales. Copia el resultado como CSS o como clase de Tailwind, compártelo con un enlace o pega un box-shadow de tu hoja de estilos para seguir trabajando en él.
Preguntas frecuentes
¿Qué hacen el desenfoque y la expansión?
El desenfoque suaviza el borde de la sombra: 0 es una línea nítida y los valores mayores la difuminan en más píxeles. La expansión agranda (positiva) o encoge (negativa) la sombra antes de desenfocarla; una pequeña expansión negativa con mucho desenfoque da las sombras suaves y recogidas de las interfaces modernas.
¿Por qué usar varias capas?
Las sombras reales son oscuras y nítidas cerca del objeto y más claras y suaves al alejarse. Una sola capa no puede hacer ambas cosas; apilar varias con desplazamiento y desenfoque que se duplican, como el ajuste «Suave en capas», queda mucho más natural.
¿Qué es una sombra inset?
Una sombra inset se dibuja dentro de la caja en lugar de fuera, así que la caja parece hundida: útil para campos de texto, huecos y botones pulsados. Puedes mezclar capas interiores y exteriores en una misma sombra.
¿box-shadow ralentiza la página?
Unas pocas sombras cuestan poco. Desenfoques muy grandes en muchos elementos, o animar el propio box-shadow, pueden bajar los fotogramas en móviles lentos; para animar, cambia la opacidad de un pseudoelemento que ya tenga la sombra.