Safe starting point
No shadow
Elevation levels
Applies to All viewports
A small ladder of shadows, each tied to what the surface is doing. Most surfaces should sit at level 0.
- Level 0
- Level 1
- Level 2
- Level 3
Common range Four levels, 0 to 3
- Level 0
- No shadow. Default surfaces. Separate them with spacing, a border or a background change.
- Level 1
- Very subtle. Cards that genuinely need to lift off a busy background.
- Level 2
- Clear. Dropdowns, menus and sticky bars that overlap content.
- Level 3
- Strongest. Modals, popovers and other floating surfaces.
Why?
A shadow says this is above that. Used on everything, it says nothing and makes the screen look dirty.
When to deviate. Dark themes show shadows poorly; use lighter surface colours for height instead.
Common mistakes (6)
- A shadow on every card.
- Dark, heavy shadows.
- Very large blur that reads as a glow.
- Different shadows on the same kind of component.
- A strong border and a strong shadow together.
- Elevation where spacing or a background change would do.
Senior designer note“Before adding a shadow, ask what is physically supposed to sit above what.”
Official guidanceSGDS
- SGDS
Keep elevation subtle so it adds depth without taking focus from content.
SGDS, Elevation(opens in a new tab)Design-system convention
- SGDS
Surface elevation is for things that temporarily appear in front, such as dropdown menus and tooltips. An opacity background focuses layered surfaces such as modals.
SGDS, Elevation(opens in a new tab)Design-system convention