Key insights
- 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.
