CSS glassmorphism generator
Adjust backdrop blur, color saturation, glass opacity and subtle edge highlights — get clean, modern CSS glassmorphism code in seconds.
.glass-card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}How to use it
- Select a preset (Frost White, Obsidian Dark, Neon, Cyber, Pearl) or fine-tune parameters manually.
- Use
backdrop-filter: blur()to blur underlying layers andsaturate()to make colors beneath the glass vibrant. - Pick a glass tint and transparency (
rgba(...)) — 10% to 25% opacity yields the most realistic frosted look. - Add a delicate edge reflection via
borderand subtle depth viabox-shadow, then click “Copy”.
How it works
What is Glassmorphism and how is it made?
Glassmorphism is a popular modern UI design style that simulates translucent frosted glass. The effect is created by balancing three CSS rules: background blur behind the element (backdrop-filter: blur), translucent background color (rgba), and a 1px border with a soft white or bright opacity that imitates light catching the beveled edge of glass.
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.2);
}filter vs backdrop-filter
A frequent mistake is writing filter: blur(). filter: blur() blurs the element itself, turning text and buttons into an unreadable smudge! backdrop-filter: blur() leaves all contents inside the card perfectly sharp, while only blurring whatever graphics lie underneath the card.
/* Correct: sharp typography, blurred backdrop */
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);The Edge Highlight
Real glass catches light along its cut edges. In CSS, we emulate this reflection with border: 1px solid rgba(255, 255, 255, 0.3). Without this border, the glass card looks like a flat translucent wash; with it, it feels tangible and elevated.
Browser compatibility & the Safari prefix
backdrop-filter is supported in all modern browsers. However, WebKit (Safari on macOS and iOS) still requires the -webkit-backdrop-filter prefix. Always output both declarations for reliable cross-browser rendering.
FAQ
Why is my text blurry?
You used filter: blur() instead of backdrop-filter: blur(). The latter keeps all nested text and buttons crystal-clear.
Why does the glass look invisible on plain white?
Glass needs colorful elements, photos, or patterns underneath to be visible. On a solid flat background there is nothing to refract.
Is the -webkit- prefix still required?
Yes, for Apple Safari on iOS and macOS, -webkit-backdrop-filter is strictly required.
Does glassmorphism harm rendering performance?
Moderate blurs (12px–20px) run smoothly at 60fps on modern hardware. Avoid applying massive blurs (50px+) to dozens of simultaneously animated cards on mobile.
