Backdrop-blurred frosted surfaces in three densities.
Usage#
<div class="glass p-6 rounded-xl">Frosted surface</div>The classes#
| Class | Purpose |
|---|---|
glass | Standard frosted surface (backdrop blur + translucent bg) |
glass-light | Lighter frost for light UIs |
glass-dark | Deeper frost for dark UIs |
Compose with utilities#
<div class="glass p-8 rounded-2xl max-w-md mx-auto hover:scale-[1.02] transition">
<h3 class="text-lg font-bold">Composed</h3>
</div>Customization#
Every component is built from theme tokens (colors, blur radii, shadows). Redefine tokens in your config and the whole family restyles. For structural changes, copy the rules into your own layer and edit freely.
Accessibility#
- Verify 4.5:1 contrast over the blur — translucent surfaces reduce effective contrast
- prefers-reduced-transparency: provide a solid fallback
Related#
components/index|Components hub · themes/index|Themes · recipes/index|Recipes