Real depth comes from stacking multiple shadows, not one blur: a tight contact shadow, a mid-distance shadow, and a wide soft spread shadow layered together.
The tight contact shadow (~0 1px 3px) anchors the element to the surface — it's what makes the card feel physically placed rather than floating.
A subtle colored glow (a low-opacity blur in an accent hue) adds a premium, branded feel that plain black shadows can't.
Match the glow color to the product context — purple for creative tools, blue for fintech, green for health — so elevation reinforces brand identity.
A 3D lift (perspective + a small rotateX + translateZ) adds genuine depth beyond a flat drop shadow, making the surface read as tilted toward the viewer.
Elevation is a hierarchy signal: the more elevated an element, the more important it reads — which is why a premium tier looks lifted while a basic one stays flat.
Do / Don't
Do: Layer three shadows — tight contact, mid-distance, and wide soft spread — for believable depth.
Do: Tint the glow to your brand accent so elevation reinforces identity.
Do: Reserve the strongest elevation for the elements that matter most.
Don't: Rely on a single flat drop shadow for every surface.
Don't: Treat shadows as decoration — they communicate depth and hierarchy.
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
