Shadow & blur
Elevation and depth are expressed through a consistent shadow scale and backdrop-blur tokens. Use shadows to convey hierarchy and blur to create frosted-glass surfaces.
Box shadow
Seven levels of elevation from a barely-visible lift (xs) to a dramatic floating card (3xl). All shadows use a dark neutral tint so they work on both white and light-grey backgrounds.
shadow-xs0px 1px 2px 0px rgba(10,13,18,0.05)
shadow-sm0px 1px 3px 0px rgba(10,13,18,0.10), 0px 1px 2px 0px rgba(10,13,18,0.06)
shadow-md0px 4px 8px -2px rgba(10,13,18,0.10), 0px 2px 4px -2px rgba(10,13,18,0.06)
shadow-lg0px 12px 16px -4px rgba(10,13,18,0.08), 0px 4px 6px -2px rgba(10,13,18,0.03)
shadow-xl0px 20px 24px -4px rgba(10,13,18,0.08), 0px 8px 8px -4px rgba(10,13,18,0.03)
shadow-2xl0px 24px 48px -12px rgba(10,13,18,0.18)
shadow-3xl0px 32px 64px -12px rgba(10,13,18,0.14)
Backdrop blur
Four blur strengths for frosted-glass UI surfaces. Each token is shown as a light variant (bg-white/60) and a dark variant (bg-black/60) over a gradient background.
sm light4px
sm dark4px
md light8px
md dark8px
lg light12px
lg dark12px
xl light20px
xl dark20px