Elevation is the relative distance between two surfaces along the z-axis. The distance from the front of one surface to the front of another is measured along the z-axis in density-independent pixels and depicted (by default) using shadows.
| Token Name | Value | Class Example | Shadow Preview |
|---|---|---|---|
--drop-shadow-100
|
0 0 0.5px rgba(0,0,0,0.3) 0 1px 3px rgba(0,0,0,0.15) |
.drop-shadow-100
|
|
--drop-shadow-100-inverse
|
0 0 0.5px rgba(0,0,0,0.3) 0 -1px 3px rgba(0,0,0,0.15) |
.drop-shadow-100-inverse
|
|
--drop-shadow-200
|
0 0 0.5px rgba(0,0,0,0.18) 0 3px 8px rgba(0,0,0,0.08) 0 1px 3px rgba(0,0,0,0.08) |
.drop-shadow-200
|
|
--drop-shadow-300
|
0 0 0.5px rgba(0,0,0,0.15) 0 1px 3px rgba(0,0,0,0.08) 0 5px 12px rgba(0,0,0,0.08) |
.drop-shadow-300
|
|
--drop-shadow-400
|
0 0 0.5px rgba(0,0,0,0.12) 0 10px 24px rgba(0,0,0,0.08) 0 2px 8px rgba(0,0,0,0.08) |
.drop-shadow-400
|
|
--drop-shadow-500
|
0 3px 12px rgba(0,0,0,0.05) 0 0 .5px rgba(0,0,0,0.08) 0 12px 32px rgba(0,0,0,0.12) 0 2px 5px rgba(0,0,0,0.1) |
.drop-shadow-500
|
|
--drop-shadow-600
|
0 3px 12px rgba(0,0,0,0.05) 0 0 .5px rgba(0,0,0,0.08) 0 16px 48px rgba(0,0,0,0.14) 0 6px 12px rgba(0,0,0,0.1) |
.drop-shadow-600
|