Generador de Sombras para Tailwind
Construye una sombra por capas de forma visual, obtén una clase Tailwind con valor
arbitrario shadow-[...] más el CSS puro.
Cómo funciona
El desplazamiento en x e y, el desenfoque, la extensión, el color y el interruptor "inset"
de cada capa se ensamblan en un segmento de box-shadow, y varias capas se unen
con comas, la sintaxis CSS estándar de sombras múltiples. Para la clase Tailwind, ese mismo
valor cambia sus espacios por guiones bajos y mantiene las comas tal cual (el analizador de
valores arbitrarios de Tailwind espera un estilo
shadow-[0_4px_6px_rgba(0,0,0,0.1)]), y luego se envuelve en
shadow-[...]. El estilo box-shadow real del recuadro de vista
previa se fija a la versión CSS pura, así que lo que ves coincide exactamente con ambas
salidas.
Todo se calcula en el JavaScript de esta página a partir de los valores que fijas. No se sube nada.
Preguntas frecuentes
¿Cómo funciona una clase de sombra con valor arbitrario en Tailwind?
Tailwind te permite escribir shadow-[<cualquier-valor-css>] y lo compila directamente a box-shadow: <cualquier-valor-css>, sin necesidad de cambios en el archivo de configuración. Los espacios dentro del valor deben convertirse en guiones bajos, algo que esta herramienta gestiona automáticamente por ti.
¿Puedo apilar varias capas de sombra?
Sí, haz clic en "Añadir capa" para agregar otra sombra encima. El box-shadow real admite capas separadas por comas, y esta herramienta construye la clase de valor arbitrario de la misma manera, uniendo las capas con comas.
¿Se envía esto a algún sitio?
No, la sombra se construye y previsualiza por completo en el motor CSS de tu navegador. No se sube nada.