Skip to content
UX Atlas
Plate FND·048 · UI foundationGrid D2 · Rev. 2026-08-14

Elevation

A system of layers that says what sits above what, expressed visually and enforced in code.

UI foundationCraft conventionIntermediate

Definition

Elevation is the apparent distance of a surface from the background. It is communicated through shadow, surface lightness or both, and it should map to a documented set of levels rather than to arbitrary z-index values.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2A working elevation system
  3. 3Running an elevation system
  4. 4In practice
  5. 5Local chart
  6. 6Continue from here

Reach for this when

  • Defining overlay behaviour.
  • Building a dark theme.
  • Debugging stacking problems.
  • Several layered surfaces exist and their stacking order has started to be argued about.

Common mistakes

  • Ad hoc z-index values.
  • Shadow-only elevation carried into dark mode.
  • Too many elevation levels to distinguish.
0 page1 card2 dropdown3 popover4 modalIn dark mode, each level lightens instead of casting a shadow.
A five-level elevation system. Each level has a defined shadow, a defined dark-mode surface, and a defined z-index range.

A working elevation system

LevelUsed byLight modeDark mode
0Page backgroundBase surfaceBase surface
1Cards, raised panelsVery subtle shadowSurface one step lighter
2Sticky headers, dropdownsSmall shadowTwo steps lighter
3Popovers, tooltipsMedium shadowThree steps lighter
4Modals and dialogsLarge shadow plus scrimFour steps lighter plus scrim
5Toasts and critical alertsLarge shadowHighest surface

Running an elevation system

Do

  • Define a small number of levels, each with a stated meaning.
  • Tie z-index to the same levels, so stacking and appearance agree.
  • Express elevation with surface lightness in dark themes, where shadows barely read.
  • Keep the light source consistent, which means shadows always fall the same way.

Do not

  • Invent a z-index of 9999 to win a stacking argument.
  • Give every card elevation, which flattens the hierarchy you were trying to build.
  • Use elevation to indicate importance. It indicates layer.

In practice

  1. i.

    Dark mode elevation by lightness

    Theming

    Shadows are almost invisible against dark surfaces. Raising elevation by lightening the surface is the standard approach, and it needs to be defined per level rather than improvised.

  2. ii.

    The z-index arms race

    Why the scale matters

    A dropdown at 100, a modal at 1000, a toast at 9999 and a cookie banner at 2147483647. Each value was chosen to beat the last, and the result is a stacking order nobody can reason about.

Local chart

FND·048 · Region II · Grid D2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

CardCMP·022 · APPLIED THROUGHDrawer and SheetCMP·011 · APPLIED THROUGHModal DialogCMP·010 · APPLIED THROUGHPopoverCMP·012 · APPLIED THROUGHAffordances and SignifiersPRIN·007 · PRINCIPLES BEHIND THISElevationTERM·067 · SHORT DEFINITIONFocus ManagementA11Y·004 · RELATED CONCEPTDesign TokensSYS·001 · RELATED CONCEPTCommon RegionFND·006 · RELATED CONCEPTDark ModeFND·027 · RELATED CONCEPTFigure and GroundFND·009 · RELATED CONCEPTNeutralsFND·025 · RELATED CONCEPT

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.