Generador de CSS box-shadow

Anatomía de box-shadow

La sintaxis CSS es box-shadow: x y blur spread color;:

• X: desplazamiento horizontal. Positivo = derecha. Para sombras realistas casi siempre 0.
• Y: desplazamiento vertical. Positivo = abajo. Generalmente 4-20px para emular luz cenital.
• Blur: qué tan difusa es la sombra. Valores bajos (0-4px) dan sombras duras tipo brutalismo; valores altos (20-50px) dan sombras suaves modernas.
• Spread: cuánto se expande la sombra antes del blur. Negativo achica, positivo agranda. Casi siempre 0.
• Color: idealmente rgba con baja opacidad (4-15%). El negro puro a 100% se ve plástico.

El truco de las multi-shadow

Las sombras "premium" que ves en Stripe, Vercel o Linear no son una sola sombra: son dos o tres apiladas. Una corta y nítida cerca del elemento (1-2px de Y, blur bajo, opacidad media), y una larga y difusa más abajo (8-20px de Y, blur alto, opacidad baja). El resultado emula cómo la luz real proyecta sombras: una directa y una indirecta.

box-shadow:
  0 1px 2px rgba(9, 9, 11, 0.06),
  0 4px 12px rgba(9, 9, 11, 0.08);

Inset: cuándo usarla

Una sombra inset va hacia adentro del elemento y simula profundidad invertida. Casos legítimos: inputs en estado "pressed", contenedores que parecen hundidos en la página, áreas de drop zone activas. Caso ilegítimo: todos los botones (skeuomorfismo de los 2010, ya no envejece bien).

Sombras y dark mode

Las sombras se ven mucho menos en fondos oscuros: el negro sobre negro es casi invisible. Soluciones:

1. Bordes claros en lugar de sombras: border: 1px solid rgba(255,255,255,0.08).
2. Sombras más opacas (20-40% en vez de 8-12%) y con blur más grande.
3. Sombras de color: en dark mode, una sombra teñida con el color de marca a baja opacidad puede dar el efecto de "glow" en lugar de profundidad.

Performance: cuándo te puede romper el frame rate

Box-shadow se calcula en CPU (no GPU). Animar el blur de 100 elementos a la vez puede tirar el frame rate. Si necesitás animar sombras (ej. al pasar el mouse), usá transform en lugar de cambiar el blur, o usá filter: drop-shadow() que sí va por GPU pero respeta los bordes transparentes (útil para SVG e imágenes con fondo).

Cuatro sombras que funcionan en cualquier UI

• Card subtle: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)
• Card hover: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05)
• Modal / popover: 0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06)
• Floating button: 0 6px 20px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08)