Shadows

Shadow utilities create depth and elevation. All shadows use black with configurable opacity that automatically adjusts for dark mode. Larger shadows use multiple layers for realistic lighting, mimicking how real-world objects cast both sharp and diffuse shadows.

Shadow Sizes

Classes: .shadow-none, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl

Multi-Layer Shadows

Every shadow level compounds multiple layers for realism. A tight contact shadow defines the edge while softer ambient layers create atmospheric depth. This mimics real-world lighting where objects cast both direct and indirect shadows. shadow-lg uses three layers; shadow-xl uses four.

Dark Mode Behavior

Shadows automatically adjust for dark mode. The --shadow-strength variable increases from 0.1 (light) to 0.25 (dark), making shadows more pronounced against dark backgrounds. This maintains depth perception without becoming invisible.

Customization

The shadow system has two knobs. --shadow-strength controls base opacity. --shadow-color sets the hue and saturation (HSL components, no alpha). Change the color to warm or cool your shadows across the board.

/* config.css -- defaults */
--shadow-color: 0 0% 0%;      /* Pure black */
--shadow-strength: 0.1;        /* Light mode */

.dark {
  --shadow-strength: 0.25;     /* Dark mode */
}

/* Example: warm shadows */
--shadow-color: 30 50% 20%;   /* Brownish tint */

/* Example: cool shadows */
--shadow-color: 220 30% 15%;  /* Blue-gray tint */

When to Use Each Shadow