7 shadow steps — one stacking story.
Every shadow token, in full — the complete reference behind the hub's layered scene, with each step's raw box-shadow value and its CSS variable.
none
No shadow
none
var(--shadow-none)
sm
Subtle shadow for slight elevation
0 1px 2px 0 rgb(0 0 0 / 0.05)
var(--shadow-sm)
base
Default shadow for cards and raised elements
0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
var(--shadow-base)
md
Medium shadow for dropdowns and popovers
0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
var(--shadow-md)
lg
Large shadow for modals and overlays
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
var(--shadow-lg)
xl
Extra large shadow for maximum elevation
0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
var(--shadow-xl)
inner
Inner shadow for recessed elements
inset 0 2px 4px 0 rgb(0 0 0 / 0.05)
var(--shadow-inner)
Dark mode: shadows are replaced with border + background-lift. Same tokens, different rendering.