The usual way shadow gets added to an interface: one box-shadow value, copy-pasted onto every card, dropdown, and modal in the product. It's an easy habit, and it's also why shadow so often reads as decoration instead of doing what it's supposed to do: telling the user what's sitting above what.
What shadow is actually for
In a real environment, an object closer to the light source, and further from the surface behind it, casts a bigger, softer shadow than one resting flat against that surface. Interfaces borrow this because it's an intuitive way to communicate layering. A modal floating over a page should look further up than a card sitting flat inside it. A single fixed shadow value can't express that difference. Every layer ends up looking like it's at the same height, which quietly undermines the hierarchy shadow was supposed to create.
Build an elevation scale, not one shadow
The fix follows the same pattern as color, type, radius, and spacing: a small set of levels instead of one value.
- Level 1, resting: barely-there shadow for cards sitting flat in the normal page flow. Small blur, low opacity.
- Level 2, raised: dropdowns, popovers, hover states. Noticeably larger blur and offset than resting.
- Level 3, floating: modals, dialogs. The largest, softest shadow. It should look clearly detached from the page behind it.
As elevation increases, the shadow should get larger and softer rather than simply darker. A bigger, more diffuse shadow is what actually reads as further away. A darker but tight shadow just reads as heavier.
Layer shadows instead of using one
A single box-shadow tends to look flat and a bit synthetic. Real shadow in the world is actually a blend: a tight, darker shadow close to the object (a contact shadow) plus a larger, softer one further out (an ambient shadow). Stacking two box-shadow values, one small and sharp, one large and soft, produces a noticeably more convincing result than either alone. It's a small change from most existing one-shadow CSS.
Keep the light source consistent
Shadows should all fall in the same direction, typically down and slightly to one side, across every component in the product. Mixing directions, one component's shadow falling down-right, another's falling straight down, reads as inconsistency even to someone who can't articulate why it looks wrong. Pick one light direction for the whole system and keep every level of the scale consistent with it.
Where it usually breaks down
Too dark or too opaque is the most common issue: a heavy, high-opacity shadow reads as harsh rather than elevated. Real shadows are diffuse and fairly light; low opacity, 10 to 20 percent, usually looks more natural than it seems like it should. The same shadow on every layer is the other common one. If cards, dropdowns, and modals all use the same value, elevation stops communicating anything, since everything looks like it's floating at the same height. And shadow chosen without radius in mind tends to look unfinished; a soft, diffuse shadow around a sharp-cornered element reads as a mismatch rather than a design choice.
Shadow and radius are a pair
Worth repeating from the radius guide: elevation and rounding are the same underlying concern, how a surface separates from what's behind it, and work better designed together than as two unrelated settings. See border-radius in UI design, or set both up in one place with the Design Language Studio, where radius and shadow are handled as a single surface-treatment step.
To build and preview an elevation scale, use the Shadow Builder.
