Generador de CSS Box Shadow
Color
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
Paleta de Color desde Imagen
Suelta una imagen y la herramienta extrae una paleta de colores dominantes vía Canvas — copia HEX o llévate el set completo.
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.
Comprobador de Contraste de Color
Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.