Elevation & surfaces
Depth is a ladder of surfaces plus shadow. The key rule:in dark mode shadows barely show, so elevation switches to a hairline borderand a one-step-lighter surface (e.g. the Card uses dark:shadow-none+ a border). Toggle dark (top-right) to see the swap.
Surface ladder
mutedRecessed well — sits below the base.
backgroundThe page base.
cardRaised content surface.
popoverFloating layer (menus, popovers) — highest.
Level tokens
level-0…3 are explicit elevation fills (often translucent) for glassy/stacked UI, alongside overlay (scrim) andsurface-glass.
level-0
level-1
level-2
level-3
Shadow ramp
shadow-2xs
shadow-xs
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
There is also shadow-glass for translucent glass panels. Shadows render in light mode; in dark, prefer border-based elevation.