Elevation
Elevation uses shadow depth to communicate where surfaces sit in the visual stack. Consistent elevation helps users understand what is background, what is content, and what demands their attention.
Elevation Scale
Five levels map to Tailwind shadow utilities. Level 0 is the default page plane; each step above adds depth for floating UI.
Flat
none
Raised
shadow-sm
Overlay
shadow-md
Modal
shadow-lg
Top
shadow-xl
| Level | Name | Utility | When to use | In this system |
|---|---|---|---|---|
| 0 | Flat | none | Base page surfaces and inline content that share the same visual plane. | Page background, sidebar, tables, form fields, cards that rely on border only |
| 1 | Raised | shadow-sm | Gentle lift for grouped content that should read as a distinct surface without floating. | Calendar, carousel controls, floating sidebar variant |
| 2 | Overlay | shadow-md | Menus, panels, and pickers that float above page content and dismiss on interaction outside. | Dropdown menu, select, command palette, search results, theme switcher |
| 3 | Modal | shadow-lg | Focused interruptions that block or narrow the user's context until resolved. | Dialog, sheet (mobile sidebar) |
| 4 | Top | shadow-xl | Highest-priority transient surfaces that must read above all other UI. | Drawer, chart tooltip, block surfaces |
Using Elevation for Hierarchy
Hierarchy is about relative position, not decoration. Shadow tells users which layer they are interacting with and what can be ignored until dismissed.
Elevation signals stacking order
The higher an element sits in the interaction stack, the stronger its shadow should be. Users infer depth — a menu above a card, a dialog above a menu — from shadow intensity.
Prefer borders on the same plane
When content shares a plane with its surroundings, use background color and border tokens instead of shadow. Reserve elevation for elements that truly float above siblings.
Climb the scale step by step
Avoid jumping from flat (level 0) to modal (level 3) without intermediate layers. Each nested context should increase elevation by one level so the stack reads clearly.
Pair elevation with surface tokens
Shadows always sit on semantic surfaces — bg-card, bg-popover, bg-background — never on transparent layers. The surface color and shadow work together to separate planes.
Hierarchy in Practice
A typical stack builds from the page surface upward. Each nested layer increases elevation by one level so depth stays legible in both light and dark mode.
Level 0 · Page surface
The base plane. No shadow — structure comes from background color and borders.
Level 1 · Raised card
Subtle lift groups related content without breaking the page plane.
Level 2 · Overlay menu
Dropdowns and popovers float above cards and page content.
Level 3 · Modal dialog
Dialogs and sheets demand focus — stronger shadow signals priority.
Level 4 · Top
Drawers and tooltips sit at the highest elevation.
Reading the stack: Page (0) → Card (1) → Menu (2) → Dialog (3). The drawer callout (4) represents surfaces that must appear above everything else, such as edge panels and data tooltips.
Guidelines
- •Do not combine arbitrary shadow values — stick to
shadow-sm,shadow-md,shadow-lg, andshadow-xl. - •Match
z-indexto elevation — higher shadows should correspond to higher stacking contexts (menus atz-50, modals above menus). - •Never use shadow as the only affordance for interactivity — pair elevation with borders, background tokens, and focus rings.
- •In dark mode, shadows stay subtle. Surface contrast (
bg-cardvsbg-background) does most of the separation work; shadow reinforces depth.