Elevation Utility
Programmatic control over Material Design 3 elevation levels using shadow depth. Not intended as a substitute for semantic hierarchy; pair elevation with spacing, typography, and labeling.
Variants
All Elevation Levels (0-5)
Click any box to see its elevation level displayed below.
Level 0
No shadow
Level 1
1dp
Level 2
3dp
Level 3
6dp
Level 4
8dp
Level 5
12dp
Click an elevation box above to see its shadow value
// Apply elevation to an element
applyElevation(element, 2);States
Interactive Card with Hover Elevation
Hover over the card to see elevation increase smoothly.
Hover to elevate
Current elevation: 0
Dynamic Elevation Controller
Adjust elevation level dynamically.
0
Controlled Card
Adjust elevation with controls above
Manager with Auto States
Card automatically elevates on hover, focus, and click using ElevationManager.
2
3
Managed Card (hover/focus/click)
Current elevation: 0
API
Functions
| Function | Purpose |
|---|---|
getElevation(level) |
Get box-shadow value for a level (0-5) |
getCSSVariable(level) |
Get CSS custom property name for a level |
applyElevation(element, level) |
Apply elevation directly to element |
applyElevationVar(element, level) |
Apply elevation using CSS custom property |
removeElevation(element) |
Remove elevation from element |
getElementElevation(element) |
Get current elevation level from element |
applyElevationWithTransition(element, fromLevel, toLevel,
duration)
|
Apply elevation with smooth animation |
ElevationManager Class
Manages elevation with automatic state changes on interaction.
| Method | Purpose |
|---|---|
constructor(element, options) |
Create manager with configuration |
setElevation(level) |
Set elevation with transition |
getElevation() |
Get current elevation level |
reset() |
Reset to default elevation |
updateOptions(options) |
Update configuration |
detach() |
Remove event listeners |
Configuration Options
Options passed to ElevationManager constructor:
| Option | Type | Default | Description |
|---|---|---|---|
defaultLevel |
number | 0 | Base elevation level |
hoverLevel |
number | 2 | Elevation on hover |
activeLevel |
number | 3 | Elevation when pressed/active |
focusLevel |
number | 2 | Elevation on focus |
duration |
number | 300 | Transition duration (ms) |
Accessibility
Keyboard Interaction
| Key | Context | Expected Result |
|---|---|---|
Tab |
Interactive elevation demo | Moves focus to interactive cards and controls |
Enter / Space |
Focus on actionable control | Applies selected elevation behavior |
Semantics
- Elevation is visual only and should be paired with semantic cues.
- Use sufficient contrast and explicit focus indicators alongside shadow changes.
- Compatible with mouse, touch, and keyboard interactions.
Usage Guidelines
- When to use: Use elevation to communicate hierarchy, interactive affordance, and transient state changes like hover or drag.
- When not to use: Avoid relying on elevation alone for critical state or grouping differences.
- Composition: Keep elevation levels consistent across similar surfaces and transition smoothly between states.
- Common mistakes: Jumping across too many levels creates visual noise and weakens hierarchy.