Generador de Box Shadow
Apila varias sombras, ajusta cada una con x/y/desenfoque/difusión/color/opacidad/inset y previsualízalas en una tarjeta, botón, círculo o campo de entrada. 13 preajustes listos para producción, incluidos niveles Material, Neumorphism, Neon Glow y Long Shadow. Exporta como CSS puro o como clase Tailwind de valor arbitrario.
Everything runs in your browser. Nothing is uploaded.
Cómo usar este generador de box shadow
- Elige un preajuste inicial o haz clic en '+ Añadir capa' para construir desde cero.
- Ajusta x, y, desenfoque, difusión, color, opacidad e inset para cada capa.
- Reordena las capas con los botones ↑↓ (arriba es lo más cercano al elemento).
- Cambia la forma de vista previa (tarjeta / botón / círculo / campo de entrada) y ajusta el color de fondo y del elemento.
- Copia el CSS o la clase Tailwind de valor arbitrario.
Preguntas frecuentes
¿Cuál es la diferencia entre desenfoque y difusión?
El desenfoque suaviza el borde de la sombra — cuanto más alto, más suave la sombra. La difusión agranda o reduce la sombra antes del desenfoque — positivo agranda, negativo reduce.
¿Qué es inset?
Las sombras inset se dibujan dentro del elemento en lugar de fuera, haciendo que el elemento parezca hundido o ahuecado.
¿Por qué apilar varias sombras?
Las sombras reales están en capas — una sombra nítida cerca del elemento junto con una sombra suave más alejada se ve más natural. Material Design usa entre 2 y 3 capas.
¿Funciona la clase Tailwind en cualquier proyecto?
Usa la sintaxis de valor arbitrario de Tailwind (`shadow-[...]`), que requiere Tailwind v3+ con JIT/valores arbitrarios.