Shadow / Elevation

Definition

A shadow is the soft, blurry mark an element casts behind itself, and it makes something invisible suddenly visible: how far that element is lifted off the screen. We call that lifted distance elevation. When a shadow is small, dark, and hugs the element tightly, the element looks like it is resting flat on the surface. When the shadow grows large, soft, and spreads out wide, the element looks like it has been raised well above everything else. This mirrors how the real world works — the higher an object floats, the bigger and fainter its shadow becomes — so we instantly read which element is on top without anyone having to explain it.

Why does it matter?

A shadow is not just decoration; it is a signal about the z-axis of your screen, telling the user what is in front and what is behind. Elements that sit on top of other content and need to grab attention — like a modal or a popover — get a large shadow so they clearly float above the page. A card resting quietly in the background, by contrast, gets a faint shadow or none at all, so it stays calm and settled. When you space elements out by elevation like this, the user naturally understands which element is active right now and where their focus should go. Shadows also hint at motion, as if something is being pressed down or lifting up: hover over a button and a growing shadow makes it feel like it rises slightly toward you. But restraint is everything with shadows. Drop a heavy shadow on every element and the whole screen turns heavy and cluttered — the hierarchy you were trying to build disappears, leaving only visual noise.

Common mistakes

• Putting a shadow on everything. When cards, buttons, and input fields are all floating at once, nothing reads as truly raised and the hierarchy collapses. Shadows only carry weight when you save them for the elements you actually want to emphasize.
• Making shadows too dark and too hard. A near-black shadow with almost no blur looks like a dark border around the element and leaves a cheap, dated impression. Keep it light and softly spread, the way real light behaves, and it reads as natural.
• Mismatching the elevation and the size of the shadow. Give a background-hugging card a modal-sized shadow and users get confused about why it appears to float so high. Pick a shadow whose size matches the element's real role.

Practical tips

• Think of shadows as elevation and decide on just two or three levels up front. For example, pair low with cards, medium with dropdowns, and high with modals. Tying depth to roles like this keeps a consistent sense of depth across every screen and makes it obvious at a glance what is raised.
• For the shadow color, reach for a slightly darkened version of the element's background rather than pure black. Give it low opacity and a generous blur and it looks far softer and more refined. Stacking several faint shadows creates more natural depth than a single heavy one.
• On light backgrounds where a shadow alone struggles to define an edge, add a very subtle border alongside it to lightly reinforce the element's outline, and the whole thing feels more grounded.

Related concepts