Generador de CSS Box Shadow
Apila tantas capas de sombra como quieras, ajusta offset, blur, spread, color e inset por capa, y mira la vista previa en vivo. Seis presets (Soft, Medium, Large, Neumorphism, Inset, Glow) arrancan diseños habituales. La salida se copia como regla CSS y como clase Tailwind de valor arbitrario.
Presets
Capas de sombra
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.15), 0px 2px 6px -2px rgba(0, 0, 0, 0.08);
shadow-[0px_8px_24px_-4px_rgba(0,_0,_0,_0.15),_0px_2px_6px_-2px_rgba(0,_0,_0,_0.08)]
Cómo usar
- Elige un preset o empieza desde cero.
- Ajusta offset, blur, spread y color por capa.
- Activa Inset para sombras interiores.
- Copia la regla CSS o la clase de Tailwind.
Preguntas frecuentes
- ¿Diferencia entre blur y spread?
- Blur suaviza el borde de la sombra — la distancia en la que se desvanece. Spread expande o contrae la forma de la sombra antes del desenfoque (valor negativo, hacia dentro).
- ¿Cuándo apilar capas?
- Las sombras realistas suelen necesitar dos: una capa cercana y densa + otra más amplia y suave. Material Design y los shadows por defecto de Tailwind son todos multicapa.
- ¿Por qué rgba() en vez de HEX?
- Los colores translúcidos dejan que el fondo tinte la sombra, quedando más natural. rgba() te permite fijar el alfa directamente.
- ¿Por qué los guiones bajos en Tailwind?
- Tailwind separa las clases por espacios, así que los valores arbitrarios usan guiones bajos.
Herramientas relacionadas
Generador de CSS Text-Shadow (Multi-Capa)
Apila tantas capas de text-shadow como quieras — neón, 3D, contorno, long-shadow — preview en vivo y CSS listo para copiar.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Playground de Filtros CSS
Compón visualmente blur, brightness, contrast, hue, sepia, invert y más — copia el filtro CSS o el valor arbitrario de Tailwind.
Exportador de Tokens de Color
Define una paleta de colores una vez, exporta a CSS custom properties, configuración Tailwind, SCSS, LESS, JSON de design tokens, SwiftUI Color o `colors.xml` de Android. Vista previa de swatches en vivo.
Buscador de nombre de color
Encuentra el nombre de color CSS, Tailwind o XKCD más cercano a cualquier hex/RGB — ordenado por distancia perceptual en el espacio OKLab.
Selector de Color HSL
Arrastra los sliders de matiz, saturación, luminosidad y alpha para elegir un color — copia HEX, RGB, HSL o valor arbitrario Tailwind.