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.

Click any token pill to copy its name. The middle column shows the layered shadow values; the right column previews the resulting drop shadow on a white surface.

Drop Shadow Tokens

token-name
value
shadow-preview
--mud-shadow-100
0 0 0.5px rgba(0,0,0,0.3)
0 1px 3px rgba(0,0,0,0.15)
--mud-shadow-100-inverse
0 0 0.5px rgba(0,0,0,0.3)
0 -1px 3px rgba(0,0,0,0.15)
--mud-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)
--mud-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)
--mud-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)
--mud-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)
--mud-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)