glassmorphism backdrop-filter blur saturate hero card strong frosted glass modal or dialog high-contrast glass card over dark background premium hero card with heavy blur visible glass card that stands out from background prominent overlay with heavy blur and saturation need a high-impact glassmorphism effect
Bold Glass
Fetch snippet JSON:
curl https://webspire.de/snippets/glass/bold.json Glass Card
Translucency matters only when the background still reads clearly through the panel.
Background
Customize
Quick Start
<div class="glass-bold rounded-2xl p-8">Featured content</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Features
- Dark Mode
- A11y
- prefers-color-scheme, @supports fallback
- Size
- 819 bytes · 30 lines
- Custom Properties
-
--glass-blur--glass-opacity--glass-border-opacity - Classes
-
.glass-bold
glassmorphism backdrop-filter blur saturate hero card
Maximum glassmorphism — heavy blur, saturated backdrop, and an inset highlight for a premium frosted look. Use for hero cards, modal dialogs, or any element that should feel elevated.
Pricing card with Tailwind
<div class="glass-bold rounded-2xl p-8 max-w-sm text-white">
<span class="text-sm font-medium uppercase tracking-wider
text-white/60">Pro</span>
<div class="mt-4 flex items-baseline gap-1">
<span class="text-4xl font-black">$29</span>
<span class="text-white/50">/mo</span>
</div>
<ul class="mt-6 space-y-3 text-sm text-white/80">
<li class="flex items-center gap-2">✓ Unlimited projects</li>
<li class="flex items-center gap-2">✓ Priority support</li>
<li class="flex items-center gap-2">✓ Custom domains</li>
</ul>
<button class="mt-8 w-full rounded-xl bg-white py-3
text-sm font-semibold text-black
hover:bg-white/90 transition-colors">
Get started
</button>
</div>Manual CSS overrides
.hero-card {
--glass-blur: 30px; /* Even more blur */
--glass-opacity: 0.3; /* More opaque */
--glass-border-opacity: 0.4; /* Stronger border */
}