Generador de sombras CSS
Diseña box-shadow.
Sobre esta herramienta
Ajusta los valores X e Y, el desenfoque, la expansión y el color de una sombra, con inset opcional, y exporta el resultado como declaración box-shadow o clase arbitraria shadow-[…] de Tailwind.
Cómo usar
Mueve los controles numéricos, observa la tarjeta de vista previa y copia la sombra en el formato que use tu proyecto.
Ejemplo
La elevación inicial corresponde a una tarjeta flotante sobre fondo oscuro.
Entrada
0 8px 24px 0 rgba(0,0,0,0.2)Salida
box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.2);Consejo
Las sombras suaves de interfaz rara vez encajan en la escala por defecto; los valores arbitrarios conservan el aspecto exacto.
Conviene saber
¿Puedo apilar varias sombras?
El generador produce una capa de sombra cada vez. Combina capas uniendo los valores con comas en tu CSS.
¿Cómo se construye la clase de Tailwind?
Los espacios pasan a guiones bajos dentro de shadow-[…], que es como Tailwind lee los valores arbitrarios. Los espacios dentro de colores rgba() se eliminan, como ya hace la herramienta.