Shadow Levels (0-24)
The shadow system provides 24 levels of elevation, from flat (0) to maximum depth (24):
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 Shadow Colors
Shadow colors can be customized using the
--shadow-color
CSS custom property:
Black
Red
Blue
Green
Orange
Purple
Common Use Cases
Different shadow levels are appropriate for different UI elements:
Card (Level 2)
Basic cards and surfaces
Button (Level 4)
Raised buttons and interactive elements
Menu (Level 8)
Dropdown menus and overlays
Dialog (Level 16)
Modal dialogs and important overlays
Shadow Customization
Fine-tune shadow appearance with opacity controls:
Default
Boosted
Subtle
Intense