Kempo CSS Icon Kempo CSS Theme Editor

Kempo CSS

Kempo CSS Icon
Typography
Paragraphs Headings Text Markup Text Decoration Lists
Layout
Display Flexbox Grid System Responsive Grid Alternative Responsive Grid
Borders & Spacing
Borders Border Radius Padding Margins Negative Margins Cancelled Margins
Inputs
Basic Inputs Labels Checkbox / Radio
Buttons
Button Types Button Colors Button Sizes Button Groups No Styles
Tables
Basic Table Responsive Table
Colors
Background Text Colors
Elevation
Z-Index Shadow Elevation Background Combined Example CSS Variables
Utilities
Disable Body Scrolling
Read the License
View on NPM
View on GitHub

Elevation

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)