Blurs
The backdrop-blur scale used for frosted glass surfaces.
Blur tokens set the radius for frosted-glass effects — the backdrop treatment behind anchored panels like popovers and dropdowns. Each panel below applies one blur step over a colourful bed.
xs 2px
sm 4px
md 8px
lg 16px
xl 24px
| Token | Value | Description |
|---|---|---|
| xs | 2px | Extra small blur (2px) |
| sm | 4px | Small blur (4px) |
| md | 8px | Medium blur (8px) |
| lg | 16px | Large blur (16px) |
| xl | 24px | Extra large blur (24px) |