Elevation

The elevation= attribute applies layered box shadows. Each level conveys a different depth — from subtle card lift to high-floating overlays.

All levels

none

low

mid

high

float

<div surface="glass" density="spacious" radius="xl" elevation="none">none</div>
<div surface="glass" density="spacious" radius="xl" elevation="low">low</div>
<div surface="glass" density="spacious" radius="xl" elevation="mid">mid</div>
<div surface="glass" density="spacious" radius="xl" elevation="high">high</div>
<div surface="glass" density="spacious" radius="xl" elevation="float">float</div>

elevation on a card

Elevation pairs naturally with surface="glass" or surface="matte".

Card title

Elevated card component with mid shadow

<div surface="glass" density="spacious" radius="xl" elevation="mid">
  <h3 text="subheading">Card title</h3>
  <p text="caption" style="margin-top: 0.5rem;">Elevated card component</p>
</div>

elevation on a floating panel

float elevation is designed for tooltips, dropdowns, and modals.

Floating panel

elevation="float" — max depth

<div surface="frosted" density="spacious" radius="xl" elevation="float">
  <p text="label">Floating panel</p>
</div>

CSS custom properties

--aura-shadow-low:   0 1px 3px  rgb(0 0 0 / 0.2),  0 1px 2px  rgb(0 0 0 / 0.12)
--aura-shadow-mid:   0 4px 12px rgb(0 0 0 / 0.3),  0 2px 4px  rgb(0 0 0 / 0.2)
--aura-shadow-high:  0 10px 30px rgb(0 0 0 / 0.4), 0 4px 8px  rgb(0 0 0 / 0.3)
--aura-shadow-float: 0 20px 60px rgb(0 0 0 / 0.5), 0 8px 20px rgb(0 0 0 / 0.4)