card-glass, glass, glass-light, navbar-glass — the v1 frosted surfaces.
Usage#
<div class="card-glass p-6 rounded-lg">Frosted v1 glass</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#
v1 components are frozen CSS — customize by overriding after the stylesheet, or by redefining the palette variables they consume.
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