Elevation

Elevation tokens define the visual layering of surfaces through shadow values.

For elevation and shadow usage guidelines, see the Elevation and Shadows foundations page.

Shadows

Shadow tokens are available as CSS custom properties (e.g. var(--effect-elevation-1)).

On Canvas

--effect-on-canvas

Near-flat ambient shadow for elements resting directly on the canvas.

Elevation 1

--effect-elevation-1

Subtle lift for cards, dropdowns, and low-layer popovers.

Elevation 2

--effect-elevation-2

Moderate depth for modals and floating panels.