Elevation Levels (0-24)

The elevate system provides 25 Material Design-inspired elevation levels using advanced CSS color-mixing techniques:

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Custom Elevation Colors

Customize elevation appearance using the --elevate-color CSS custom property:

Dark Gray
Red
Blue
Green
Purple
Orange

Material Design Use Cases

Different elevation levels are appropriate for different UI components following Material Design guidelines:

Card (Level 2)

Basic cards and content surfaces

Button (Level 4)

Raised buttons and interactive elements

Menu (Level 8)

Dropdown menus and floating panels

Dialog (Level 16)

Modal dialogs and important overlays

Elevation Boost & Advanced Features

Fine-tune elevation intensity with the --elevate-boost parameter:

Default
Level 8
Boosted
+2%
Enhanced
+5%
Maximum
+8%

Theme Integration

Elevation works seamlessly with light and dark themes:

Light Theme

Light Theme Card
Elevation on white background

Dark Theme

Dark Theme Card
Elevation on dark background

Interactive Hover Effects

Hover over these elements to see elevation transitions in action:

Hover Card
Level 2 → 8
Button Effect
Level 4 → 12
Enhanced
Level + Boost

HTML Structure

Basic HTML structure for using the elevate utility:

<!-- Basic elevation -->
<div class="elevate" style="--level: 4; --bg-color: 255 255 255;">
  Elevated content
</div>

<!-- Custom elevation color -->
<div class="elevate" style="--level: 8; --bg-color: 255 255 255; --elevate-color: 59 130 246;">
  Blue elevation effect
</div>

<!-- Elevation with boost -->
<div class="elevate" style="--level: 4; --bg-color: 255 255 255; --elevate-boost: 5%;">
  Boosted elevation intensity
</div>

CSS Integration

Import and customize the elevate utility in your project:

/* Import elevate utilities */
@import "./stubs/elevate/styles/03_utilities/elevate.css";

/* Custom elevation utility classes */
.elevation-low { --level: 2; }
.elevation-medium { --level: 8; }
.elevation-high { --level: 16; }

/* Hover elevation effects */
.hover-elevate:hover {
  --level: calc(var(--level, 0) + 4);
  transition: background-color 0.2s ease;
}

/* Theme-specific elevation colors */
:root {
  --elevate-color: 255 255 255; /* Light theme */
}

[data-theme="dark"] {
  --elevate-color: 17 24 39; /* Dark theme */
}

Color Mixing Algorithm

The elevation effect uses sophisticated color mixing calculations optimized for Material Design:

Level Ranges

  • 0-2: 0% to 7% (2% increments)
  • 3-6: 8% to 11% (1% increments)
  • 7-12: 11.5% to 14% (0.5% increments)
  • 13-16: 14.25% to 15% (0.25% increments)
  • 17-24: 15.125% to 16% (0.125% increments)

CSS color-mix() Implementation

Uses modern CSS color-mix() function for sophisticated color blending. The algorithm creates precise elevation steps that follow Material Design specifications while providing smooth visual progression.

Browser Support: Modern browsers with color-mix() support required. Provide appropriate fallbacks for older browsers using traditional box-shadow techniques.