Shadow Tokens

Quick implementation

/* Light mode: use near-black shadows */
:root {
  --shadow-sm:  0 1px 2px oklch(0 0 0 / 0.08);
  --shadow-md:  0 4px 6px oklch(0 0 0 / 0.12);
  --shadow-lg:  0 8px 16px oklch(0 0 0 / 0.15);
  --shadow-xl:  0 16px 32px oklch(0 0 0 / 0.18);
  --shadow-2xl: 0 24px 48px oklch(0 0 0 / 0.25);
}

/* Dark mode: switch to colored glow — black shadows are invisible on dark backgrounds */
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-sm:  0 2px 6px oklch(0.52 0.22 265 / 0.25);
    --shadow-md:  0 4px 12px oklch(0.52 0.22 265 / 0.35);
    --shadow-lg:  0 8px 24px oklch(0.52 0.22 265 / 0.45);
    --shadow-xl:  0 16px 40px oklch(0.52 0.22 265 / 0.55);
    --shadow-2xl: 0 24px 60px oklch(0.52 0.22 265 / 0.65);
  }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

Act as a senior CSS engineer. Generate a CSS custom property shadow scale (sm, md, lg, xl, 2xl) using layered box-shadows. Use oklch() for the shadow color with alpha transparency (e.g., oklch(0 0 0 / 0.1)). Ensure the shadows are defined in :root and provide a usage example for a card component. Do not use hex colors or named colors.

Why this matters in 2026

Consistent depth is crucial for modern interfaces, and hardcoding shadow values leads to visual inconsistency. By defining a shadow scale with CSS custom properties, you ensure that depth cues remain uniform across the entire application. This approach also simplifies theming, allowing you to adjust the entire depth hierarchy with a single variable change.

The logic

Layered box-shadows create a more realistic and softer diffusion than a single shadow value. The first layer handles the immediate proximity blur, while the second layer extends the spread for a softer, more ambient effect. Using oklch() allows for precise control over the shadow's darkness and transparency, ensuring it adapts well to different background colors.

Accessibility & performance

Shadows should never be the sole indicator of focus or state; always pair them with visible outlines or borders. Modern browsers are highly optimized for box-shadows, but excessive layering on many elements can impact rendering performance. Use will-change: transform sparingly and test on lower-end devices to ensure smooth interactions.