Box Shadow Generator (CSS)

La propiedad CSS <code>box-shadow</code> es una de las más poderosas y a la vez más tediosas de escribir a mano, especialmente cuando se combinan múltiples sombras para efectos de profundidad, glassmorphism o neumorfismo. Este generador visual permite componer hasta varias sombras simultáneas, ver el resultado en tiempo real y copiar el código CSS listo para producción.

Sintaxis de box-shadow y por qué los parámetros importan

La clave del neumorfismo CSS es combinar una sombra clara con inset:false y una oscura con inset:true, ambas con spread negativo, creando la ilusión de superficie presionada sin alterar el espacio del elemento.

La sintaxis completa es box-shadow: offsetX offsetY blur spread color, con la palabra clave inset opcional al inicio para sombras interiores. Offset desplaza la sombra en píxeles (valores negativos mueven a izquierda/arriba). Blur define la difusión: 0px produce sombra nítida como los badges de notificación; 40-60px crea el efecto de sombra suave característico de Material Design.

Spread es el parámetro menos intuitivo: con valor positivo expande la sombra más allá del elemento (útil para bordes brillantes); con valor negativo la contrae (técnica del neumorfismo). La combinación de inset + spread negativo crea el efecto de superficie hundida sin modificar el layout del elemento.

Los 7 presets y sus casos de uso reales

Suave (2-4px blur, opacidad 15-20%): para cards en fondos blancos o gris muy claro. El estándar del diseño de SaaS moderno. Material Design (elevación 4dp: 0 2px 4px rgba(0,0,0,.24), 0 4px 5px rgba(0,0,0,.16)): sigue las guías de Google Material 2 para botones y FABs. Neon/Glow: spread positivo en color saturado (sin offset) para efectos de brillo en interfaces oscuras o gaming.

Neumorfo requiere dos sombras simultáneas: una clara y una oscura, simétricamente opuestas. Solo funciona bien sobre fondos de gris claro neutro (no blanco puro). Sunken (inset, blur bajo, spread 0): da la apariencia de campo de formulario presionado o área activa.

Multi-shadow: técnica de capas para profundidad realista

Las sombras más convincentes en UI modernas combinan 2-3 capas con diferentes opacidades y distancias. La técnica de layered shadows de Nathan Curtis usa: una sombra pequeña cercana (baja opacidad) más una grande y difusa (muy baja opacidad). Ejemplo para un card elevado: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08).

Este generador permite agregar múltiples sombras en una sola regla CSS. El resultado se expresa como valores separados por coma, compatible con todos los navegadores modernos desde IE11. Para animaciones de hover que cambian la elevación, el truco es hacer la transición sobre la propiedad box-shadow directamente: transition: box-shadow 0.2s ease.

• ▸Hasta N sombras simultáneas en una sola propiedad CSS (separadas por coma)
• ▸Inset: convierte la sombra exterior en interior — imprescindible para neumorfismo
• ▸Spread negativo con inset: contrae la sombra creando un halo sin borde visible
• ▸El código generado es compatible con todos los navegadores modernos y lista para pegar en CSS/SCSS/Tailwind