CSS Box Shadow Design Tokens
How to create a semantic box shadow scale for design systems — low, medium, high, and focus ring shadows.
Published:
Tags: CSS box shadow tokens, design system shadows, box shadow scale
CSS Box Shadow Design Tokens A shadow scale turns from a per-component decision into a systematic design element. When every surface, card, modal, and focus ring references a named token, visual depth becomes consistent and themeable. --- Why Shadow Tokens?? Without a scale, shadow values accumulate ad hoc — cards at 20% opacity, modals at 15%, buttons with a different blur. When the design direction changes ("make everything feel lighter"), you change dozens of values. With tokens, you change four. --- What is Building a Shadow Scale? Minimal Four-Level Scale Semantic Names for Roles --- What is Layered Shadows for Realism? Real light produces multiple shadow components simultaneously — a sharp direct shadow and a soft ambient shadow. Layering two box-shadow declarations approximates…
Frequently Asked Questions
How do I create a consistent shadow scale?
Define named levels on `:root` — typically 4-6 levels from barely-there ambient shadows to strong modal shadows. Each level should increase blur radius, slightly increase spread, and slightly decrease opacity to simulate more distant light. Layering two shadow declarations per level (one ambient, one directional) produces more realistic results.
What is a focus ring shadow?
A focus ring shadow is a `box-shadow` that visually indicates which element has keyboard focus. Using `box-shadow` instead of `outline` allows rounded corners and colored rings that match the brand. The typical pattern is `box-shadow: 0 0 0 2px background-color, 0 0 0 4px focus-color` — the inner ring creates separation from the element's border.
How many shadow levels should a design system have?
Most design systems define 4-6 levels: none, small (input/badge), medium (card), large (dropdown/popover), x-large (modal/dialog), and a focus ring token. Material Design uses a continuous scale from 0dp to 24dp; Tailwind provides 6 named levels. More levels rarely add value — components should reference semantic names, not fine-grained pixel differences.
How do I define shadows with CSS custom properties?
Define the full `box-shadow` value as a custom property: `--shadow-md: 0 4px 8px rgba(0,0,0,0.08)`. Components use `box-shadow: var(--shadow-md)`. This approach allows global overrides for dark mode, brand changes, or accessibility modes by redefining the variable in the appropriate scope.
How does Material Design use shadows?
Material Design uses a continuous elevation system (0dp–24dp) where each level corresponds to specific shadow values. Higher elevation signals content priority and temporal importance (dialogs above cards above surfaces). The shadow values use a combination of umbra (direct), penumbra (diffuse), and ambient components to simulate physical light behavior.
All articles · theproductguy.in