Elevation

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.

Drop Shadow Tokens

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