Shadow Elevation Tokens — Layered Box Shadow System

Shadow Elevation Token Design

Shadow tokens create the illusion of depth in flat interfaces. A well-designed elevation system communicates visual hierarchy: floating elements (modals, dropdowns) appear above the page surface.

Elevation Scale

:root {
  --shadows-none: none;
  --shadows-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadows-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadows-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadows-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadows-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadows-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

Component-to-Elevation Mapping

Assign consistent elevation levels to component types:

Level	Shadow Token	Components
0	--shadows-none	Flat surfaces, inline elements
1	--shadows-xs	Cards at rest, list items
2	--shadows-sm	Raised buttons, hover cards
3	--shadows-md	Dropdowns, popovers
4	--shadows-lg	Modals, drawers
5	--shadows-xl	Toasts, floating action buttons

Multi-Layer Shadows

Realistic shadows use multiple layers. Each layer simulates a different light property:

--shadows-realistic:
  0 1px 1px rgba(0,0,0,0.08),     /* ambient */
  0 2px 2px rgba(0,0,0,0.06),     /* penumbra */
  0 4px 8px rgba(0,0,0,0.04);     /* umbra */

Dark Mode Shadows

In dark mode, shadows need higher opacity and sometimes color tinting:

.dark {
  --shadows-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

Performance Note

Complex multi-layer shadows can trigger expensive repaints. Use will-change: transform on animated elements with shadows to promote them to their own compositing layer.