Elevation

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

Purpose

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.

Layer structure

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.

Applying a level

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.

Levels

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.

Boundaries

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.

Tokens

--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.

Related

See Card for the elevation prop, Modal for the highest level, and Popover for floating panels.