Materials
Frosted glass material backgrounds with backdrop blur effects.
Material backgrounds combine semi-transparent backgrounds with backdrop blur to create frosted glass effects. These utilities include built-in borders and adapt to light and dark mode automatically.
Usage
<div className="material-medium rounded-lg px-4 py-2">
<h2>Frosted Glass Card</h2>
<p>Content with backdrop blur</p>
</div>Variants
Ultra Thick
Thick
Medium
Thin
Ultra Thin
Reference
| Class | Opacity | Blur | Use Case |
|---|---|---|---|
material-ultra-thick | 84% | 30px | Strong visual separation |
material-thick | 72% | 30px | Navigation bars, prominent cards |
material-medium | 60% | 30px | Cards, modals, dialogs |
material-thin | 48% | 30px | Tooltips, subtle overlays |
material-ultra-thin | 36% | 30px | Minimal blur effect |
Each variant includes a matching border. Colors derive from --background and adapt to light/dark mode.