Shadows & glow

Vanduo provides a comprehensive shadow system based on Fibonacci proportions, plus glow effects for interactive elements. Shadows create depth and visual hierarchy, while glow effects add emphasis on hover.

Fibonacci elevation ladder

Each level's Y-offset and blur are a Fibonacci pair. Depth steps through the sequence — 1/2 → 2/3 → 3/5 → 8/13 → 13/21 → 21/34 — so elevation grows at a natural rate rather than in arbitrary jumps. .elevation-0…5 map onto the shadow scale.

.elevation-0

flat

.elevation-1

1 / 2

.elevation-2

2 / 3

.elevation-3

3 / 5

.elevation-4

8 / 13

.elevation-5

13 / 21

The same pairs drive the .vd-shadow-* utilities below (.vd-shadow-2xl reaches 21/34). These proportions come from the Golden Ratio system.

Shadow Utilities

Apply shadows with utility classes:

.shadow-none

.shadow-sm

.shadow

.shadow-md

.shadow-lg

.shadow-xl

.shadow-2xl

Glow Utilities

Add glowing effects to any element:

.glow or .glow-primary - permanent glow

.hover-glow - glow on hover only

.hover-glow-success - green glow

.hover-glow-warning - yellow glow

.hover-glow-error - red glow

Glow Intensity Variants

Control the glow intensity with size variants:

.hover-glow-sm
Subtle (10px blur)

.hover-glow-md
Medium (20px blur)

.hover-glow-lg
Strong (30px blur)

<!-- Basic glow on any element -->
<div class="vd-hover-glow">Hover for primary glow</div>

<!-- Glow with specific color -->
<button class="vd-btn vd-btn-success vd-hover-glow-success">Success Glow</button>
<button class="vd-btn vd-btn-warning vd-hover-glow-warning">Warning Glow</button>
<button class="vd-btn vd-btn-error vd-hover-glow-error">Error Glow</button>

<!-- Glow intensity variants -->
<div class="vd-hover-glow-sm">Subtle glow</div>
<div class="vd-hover-glow-md">Medium glow</div>
<div class="vd-hover-glow-lg">Strong glow</div>

Colored Shadows

Semantic color shadows for emphasis:

.shadow-primary

.shadow-success

.shadow-warning

.shadow-error

CSS Variables

Customize glow colors via CSS variables:

:root {
  /* Glow colors */
  --vd-glow-primary-color: rgba(34, 184, 207, 0.25);
  --vd-glow-success-color: rgba(64, 192, 87, 0.25);
  --vd-glow-warning-color: rgba(250, 176, 5, 0.25);
  --vd-glow-error-color: rgba(250, 82, 82, 0.25);

  /* Card glow (uses primary by default) */
  --vd-card-glow-color: rgba(34, 184, 207, 0.25);
  --vd-card-glow-border-color: rgba(34, 184, 207, 0.4);
}

Note: Glow intensity is automatically increased in dark mode for better visibility.