glassmorphism backdrop-filter blur translucent card frosted glass card on gradient background translucent overlay panel blurred navigation header over image glassmorphism card for hero section need a blurred semi-transparent card glassmorphism effect on hero or landing page frosted overlay on image or video background
Frosted Glass
Fetch snippet JSON:
curl https://webspire.de/snippets/glass/frosted.json Glass Card
Translucency matters only when the background still reads clearly through the panel.
Background
Customize
Quick Start
<div class="glass-frosted rounded-xl p-8">Your content</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Features
- Dark Mode
- A11y
- prefers-color-scheme, @supports fallback
- Size
- 655 bytes · 25 lines
- Custom Properties
-
--glass-blur--glass-opacity--glass-border-opacity - Classes
-
.glass-frosted
glassmorphism backdrop-filter blur translucent card
The classic milky glass look. Works on any background — gradients, images, or solid colors. Adjust --glass-blur for stronger or softer blur, --glass-opacity for transparency.
Chrome 76+
Firefox 103+
Safari 18+
Edge 79+
Login card with Tailwind
<div class="relative min-h-screen bg-gradient-to-br from-violet-500
to-fuchsia-600 flex items-center justify-center p-4">
<div class="glass-frosted rounded-2xl p-8 w-full max-w-sm">
<h2 class="text-xl font-bold text-white mb-6">Sign in</h2>
<input class="w-full rounded-lg bg-white/10 border border-white/20
px-4 py-2.5 text-white placeholder-white/40 mb-4
focus:outline-none focus:ring-2 focus:ring-white/30"
placeholder="Email" />
<button class="w-full rounded-lg bg-white text-violet-700
font-semibold py-2.5 hover:bg-white/90
transition-colors">Continue</button>
</div>
</div>Custom Properties
| Property | Default | Description |
|---|---|---|
| --glass-blur | 12px | Blur strength of the backdrop filter |
| --glass-opacity | 0.15 | Background opacity (0 = fully transparent) |
| --glass-border-opacity | 0.2 | Border opacity for the subtle edge |
Customization
Without Glass
.card {
background: rgba(255,255,255,0.1);
/* no blur, no depth */
}
With Glass
.card {
--glass-blur: 20px;
--glass-opacity: 0.25;
/* rich depth + blur */
}
- 1 Copy the CSS snippet into your project
- 2 Add the .glass-frosted class to any container element
- 3 Customize blur and opacity via CSS custom properties
Does it work on solid backgrounds?
Technically yes, but the blur effect is invisible on solid colors. Use gradients, images, or video for the best result.
How does the dark mode fallback work?
The snippet includes @media (prefers-color-scheme: dark) which adjusts opacity values automatically. No extra classes needed.
What happens in browsers without backdrop-filter?
A @supports fallback renders a solid semi-transparent background instead. The layout stays intact.
Translucency and blur create a sense of depth while maintaining context with the content behind.
Fade In Animation
Combine with entrance animations for an elevated effect