The elevation system provides three independent utilities that work together to create visual depth and control stacking order. Level 2 is the default page level (z-index 20). Levels 0–1 are below page level, and levels 3–10 are above. Each level increments z-index by 10, leaving room for fine-tuning between levels.

Z-Index (elevation-*)

Sets z-index only. Use on positioned elements (navbars, dialogs, drawers) to control stacking order. 

<div class="elevation-0 shadow elevation-card">
  <div>
    <strong>Level 0</strong><br>
    <span class="tc-muted small">z-index: 0</span>
  </div>
</div>
<div class="elevation-1 shadow elevation-card">
  <div>
    <strong>Level 1</strong><br>
    <span class="tc-muted small">z-index: 10</span>
  </div>
</div>
<div class="elevation-2 shadow elevation-card">
  <div>
    <strong>Level 2</strong><br>
    <span class="tc-muted small">z-index: 20</span>
  </div>
</div>
<div class="elevation-3 shadow elevation-card">
  <div>
    <strong>Level 3</strong><br>
    <span class="tc-muted small">z-index: 30</span>
  </div>
</div>
<div class="elevation-4 shadow elevation-card">
  <div>
    <strong>Level 4</strong><br>
    <span class="tc-muted small">z-index: 40</span>
  </div>
</div>
<div class="elevation-5 shadow elevation-card">
  <div>
    <strong>Level 5</strong><br>
    <span class="tc-muted small">z-index: 50</span><br />
    <span class="tc-muted small">(6–10 same)</span>
  </div>
</div>
Level 0
z-index: 0
Level 1
z-index: 10
Level 2
z-index: 20
Level 3
z-index: 30
Level 4
z-index: 40
Level 5
z-index: 50
(6–10 same)
Class z-index
elevation-0 0
elevation-1 10
elevation-2 20 (page default)
elevation-3 30
elevation-4 40
elevation-5 50
elevation-6 60
elevation-7 70
elevation-8 80
elevation-9 90
elevation-10 100

Shadow (shadow)

Combine with an elevation-* class to apply a depth shadow. Levels 0–1 use inset shadows (sunk), level 2 has no shadow (page level), levels 3–5 use progressively larger outset drop shadows, and levels 6–10 use the same shadow as level 5.

<div class="elevation-0 shadow elevation-card">
  <div>
    <strong>Level 0</strong><br>
    <span class="tc-muted small">Deep Inset Shadow</span>
  </div>
</div>
<div class="elevation-1 shadow elevation-card">
  <div>
    <strong>Level 1</strong><br>
    <span class="tc-muted small">Shallow Inset Shadow</span>
  </div>
</div>
<div class="elevation-2 shadow elevation-card">
  <div>
    <strong>Level 2</strong><br>
    <span class="tc-muted small">No Shadow</span>
  </div>
</div>
<div class="elevation-3 shadow elevation-card">
  <div>
    <strong>Level 3</strong><br>
    <span class="tc-muted small">Small Drop Shadow</span>
  </div>
</div>
<div class="elevation-4 shadow elevation-card">
  <div>
    <strong>Level 4</strong><br>
    <span class="tc-muted small">Medium Drop Shadow</span>
  </div>
</div>
<div class="elevation-5 shadow elevation-card">
  <div>
    <strong>Level 5</strong><br>
    <span class="tc-muted small">Large Drop Shadow</span><br>
    <span class="tc-muted small">Max (6–10 same)</span>
  </div>
</div>
Level 0
Deep Inset Shadow
Level 1
Shallow Inset Shadow
Level 2
No Shadow
Level 3
Small Drop Shadow
Level 4
Medium Drop Shadow
Level 5
Large Drop Shadow
Max (6–10 same)

Elevation Background (bg-elevation)

Combine with an elevation-* class to apply an elevation-appropriate background color. In dark mode, higher elevations are progressively lighter (simulating ambient light from above). Levels 6–10 use the same background as level 5.

<div class="elevation-0 bg-elevation elevation-card">
  <div>
    <strong>Level 0</strong><br>
    <span class="tc-muted small">Darkest</span>
  </div>
</div>
<div class="elevation-1 bg-elevation elevation-card">
  <div>
    <strong>Level 1</strong><br>
    <span class="tc-muted small">Darker</span>
  </div>
</div>
<div class="elevation-2 bg-elevation elevation-card">
  <div>
    <strong>Level 2</strong><br>
    <span class="tc-muted small">Page default</span>
  </div>
</div>
<div class="elevation-3 bg-elevation elevation-card">
  <div>
    <strong>Level 3</strong><br>
    <span class="tc-muted small">A Little Lighter</span>
  </div>
</div>
<div class="elevation-4 bg-elevation elevation-card">
  <div>
    <strong>Level 4</strong><br>
    <span class="tc-muted small">Lighter</span>
  </div>
</div>
<div class="elevation-5 bg-elevation elevation-card">
  <div>
    <strong>Level 5</strong><br>
    <span class="tc-muted small">Lightest<br />(6–10 same)</span>
  </div>
</div>
Level 0
Darkest
Level 1
Darker
Level 2
Page default
Level 3
A Little Lighter
Level 4
Lighter
Level 5
Lightest
(6–10 same)

Combined Example

Use all three classes together on a positioned element to get z-index stacking, a matching shadow depth, and the correct background color for that level.

<div class="elevation-0 shadow bg-elevation elevation-card">
  <div><strong>Level 0</strong><br>
    <span class="tc-muted small">z-index: 0</span><br />
    <span class="tc-muted small">Deep Inset Shadow</span>
    <span class="tc-muted small">Darkest</span>
  </div>
</div>
<div class="elevation-1 shadow bg-elevation elevation-card">
  <div><strong>Level 1</strong><br>
    <span class="tc-muted small">z-index: 10</span><br />
    <span class="tc-muted small">Shallow Inset Shadow</span><br />
    <span class="tc-muted small">Darker</span>
  </div>
</div>
<div class="elevation-2 shadow bg-elevation elevation-card">
  <div><strong>Level 2</strong><br>
    <span class="tc-muted small">z-index: 20</span><br />
    <span class="tc-muted small">No Shadow</span><br />
    <span class="tc-muted small">Page default</span>
  </div>
</div>
<div class="elevation-3 shadow bg-elevation elevation-card">
  <div><strong>Level 3</strong><br>
    <span class="tc-muted small">z-index: 30</span><br />
    <span class="tc-muted small">Small Drop Shadow</span><br />
    <span class="tc-muted small">A Little Lighter</span>
  </div>
</div>
<div class="elevation-4 shadow bg-elevation elevation-card">
  <div><strong>Level 4</strong><br>
    <span class="tc-muted small">z-index: 40</span><br />
    <span class="tc-muted small">Medium Drop Shadow</span><br />
    <span class="tc-muted small">Lighter</span><br />
  </div>
</div>
<div class="elevation-5 shadow bg-elevation elevation-card">
  <div><strong>Level 5</strong><br>
    <span class="tc-muted small">z-index: 50</span><br />
    <span class="tc-muted small">Large Drop Shadow</span><br />
    <span class="tc-muted small">Lightest</span><br />
    <span class="tc-muted small">(6–10 same)</span>
  </div>
</div>
Level 0
z-index: 0
Deep Inset Shadow Darkest
Level 1
z-index: 10
Shallow Inset Shadow
Darker
Level 2
z-index: 20
No Shadow
Page default
Level 3
z-index: 30
Small Drop Shadow
A Little Lighter
Level 4
z-index: 40
Medium Drop Shadow
Lighter
Level 5
z-index: 50
Large Drop Shadow
Lightest
(6–10 same)

Elevation CSS Variables

Variable Description
--c_bg_elevation_0 Background for level 0 (darkest / deepest)
--c_bg_elevation_1 Background for level 1 (sunk below page)
--c_bg_elevation_2 Background for level 2 — equals var(--c_bg) (page default)
--c_bg_elevation_3 Background for level 3
--c_bg_elevation_4 Background for level 4
--c_bg_elevation_5 Background for level 5
--c_bg_elevation_6 – --c_bg_elevation_10 Same as --c_bg_elevation_5 (levels 6–10 do not get lighter)
--shadow_0 Shadow for level 0 (deep inset)
--shadow_1 Shadow for level 1 (shallow inset)
--shadow_3 Shadow for level 3 (very small outset)
--shadow_4 Shadow for level 4 (small outset)
--shadow_5 Shadow for level 5 (medium-small outset)
--shadow_6 – --shadow_10 Same as --shadow_5 (levels 6–10 do not get deeper)