05
Effects
Shadow and backdrop blur values using Tailwind v4 defaults.
Backdrop Blur
XS
backdrop-blur-xs
Shadow
| Token | Value | Tailwind | Usage | Example |
|---|---|---|---|---|
| 0 1px rgb(0 0 0 / 0.05) | shadow-2xs | Minimal shadow | ||
| 0 1px 2px 0 rgb(0 0 0 / 0.05) | shadow-xs | Subtle shadow | ||
| 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) | shadow-sm | Cards, hover states | ||
| 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | shadow-md | Dropdowns, popovers | ||
| 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | shadow-lg | Modals, overlays | ||
| 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | shadow-xl | Elevated surfaces | ||
| 0 25px 50px -12px rgb(0 0 0 / 0.25) | shadow-2xl | Strong elevation |