Shadow is a Z-axis language
Every shadow on a page says how high the element floats above the surface. When a design system lets each card choose its own shadow, the page silently disagrees about physics: this card floats at 2px, that one at 24px, and the eye registers the inconsistency as messiness it cannot name. Elevation is a scale, like type — usually four rungs are enough.
The discipline: an element's shadow should be a function of its *role* (resting, hovered, overlaying, modal), not of its designer's mood. Same role, same shadow, everywhere.
The four-rung scale that survives
- rung 1 — resting cards on a flat surface: 0 1px 2px rgb(0 0 0 / .06) plus a hairline border. Barely there; the card sits on the page.
- rung 2 — hover and interactive elevation: 0 4px 12px rgb(0 0 0 / .10). One rung up, clearly lifted, still calm.
- rung 3 — overlays, dropdowns, popovers: 0 12px 32px rgb(0 0 0 / .14). The element now floats above the content it covers.
- rung 4 — modals and sheets: 0 24px 64px rgb(0 0 0 / .20) plus a 0.5–1px rim light. The modal is the tallest thing on the page; the scrim beneath does the rest.
:root {
--shadow-1: 0 1px 2px rgb(0 0 0 / .06), 0 0 0 1px rgb(0 0 0 / .02);
--shadow-2: 0 4px 12px rgb(0 0 0 / .10);
--shadow-3: 0 12px 32px rgb(0 0 0 / .14);
--shadow-4: 0 24px 64px rgb(0 0 0 / .20), 0 1px 0 rgb(255 255 255 / .06) inset;
}
.card:hover { box-shadow: var(--shadow-2); }
.dropdown { box-shadow: var(--shadow-3); }
.modal { box-shadow: var(--shadow-4); }When not to glow
The glow — a colored, larger-radius shadow — is a spotlight, and spotlights are for one element per scene. A primary CTA may glow; a row of four buttons may not, or the page looks like a casino. The discipline for glows: colored shadows only on the single action you are directing the eye toward, sized tight to the element, and never as a resting state for everything hoverable.
And the silent killer: shadows under text. Text shadows are almost never needed on dark UI — if text needs a shadow to be readable, the background is too busy, and the fix is the background, not the crutch.