# Elevation

Elevation follows the active style. Graphite uses layers and borders without outer shadows. Blueprint adds cool shadows for raised surfaces.

<h2 id="purpose">Purpose</h2>

Elevation separates a surface from the one behind it. Use it when a panel floats above the page — menus, popovers, modals, toasts, and cards that lift on hover. A surface that sits flat in the layout needs a border, not a shadow.

<h2 id="anatomy">Layer structure</h2>

Blueprint levels use a soft cast and a tighter contact. As elevation rises, the cast grows and the contact attenuates. Graphite Light and Graphite Dark flatten the five outer levels to `none`. Their inset levels retain a quiet inner boundary for wells such as inputs and checkboxes.

<h2 id="usage">Applying a level</h2>

Read the level through its variable — `box-shadow: var(--bd-shadow-md)` — rather than writing a shadow value. `Provider` publishes the whole set, so a theme override changes every elevated surface at once.

<h2 id="details">Levels</h2>

In Blueprint, `xs` and `sm` mark low surfaces, `md` carries floating panels, and `lg` and `xl` carry large overlays. Graphite uses layer color and borders for the same boundaries. `glow` is an accent effect, not a depth level.

<h2 id="accessibility">Boundaries</h2>

Shadows are quiet by design and can disappear under high-contrast or forced-color settings. Keep a border or a background change on any surface whose boundary carries meaning, so the edge survives without the shadow.

<h2 id="tokens">Tokens</h2>

`--bd-shadow-xs`, `--bd-shadow-sm`, `--bd-shadow-md`, `--bd-shadow-lg`, `--bd-shadow-xl`, `--bd-shadow-inset`, `--bd-shadow-inset-sm`, and `--bd-shadow-glow`. The same values are available in code as `BD_THEME.shadows` and through `bdBuildCssVars`.

<h2 id="related">Related</h2>

See [Card](/docs/components/card) for the elevation prop, [Modal](/docs/components/modal) for the highest level, and [Popover](/docs/components/popover) for floating panels.