Card
The .glass-card utility class for creating glassmorphic container elements.
Use .glass-card when you need a glassmorphic container on a non-semantic element like a <div>.
Preview
Glass Card
A frosted glass container with specular depth, rounded corners, and a subtle border.
Usage
<div class="glass-card">
<h3>Glass Card</h3>
<p>Content goes here.</p>
</div>Nested Cards
Like semantic containers, .glass-card supports automatic nested hierarchy. Inner cards receive reduced opacity and thinner borders.
Outer Card
This inner card has lighter glass automatically.
<div class="glass-card">
<h3>Outer Card</h3>
<div class="glass-card">
<p>This inner card has lighter glass automatically.</p>
</div>
</div>CSS Properties
| Property | Value |
|---|---|
| Background | var(--glass-bg) with backdrop-filter: blur(var(--glass-blur)) |
| Border | 1px solid var(--glass-border) |
| Border Radius | var(--glass-radius-lg) (22px) |
| Padding | 2rem |
| Width | 100% |
| Depth | Specular glare + ambient shadow via glass-depth() |
Compatible Modifiers
.thin— lighter background, less blur.thick— heavier frost, more opaque.vibrant— accent-tinted background.glow— outer accent glow ring.interactive— hover lift + active press