Glassmorphism CSS generator
Tune background opacity, backdrop-filter blur and saturation, border, radius and shadow with a live frosted-glass preview, then copy the CSS and HTML snippet.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Live preview
Glass card
Translucency plus blur over a colourful background
Code
.glass-card {
background: rgba(255, 255, 255, 0.25);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 20px;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}The webkit prefix keeps Safari happy.
<div class="glass-card" style="background: rgba(255, 255, 255, 0.25); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 20px; box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18)"> Glass card </div>
What this tool does
- Build a frosted-glass card: tune background opacity plus the blur and saturation of backdrop-filter, then copy the CSS and the inline-styled HTML snippet.
- Try different levels of translucency over colourful or photographic backgrounds (clear, frosted, dark, neon, warm presets) instead of guessing values.
- Fix "glassmorphism does nothing in Safari": the generated CSS always carries the -webkit-backdrop-filter prefix.
- Check how a parameter set actually looks in the live preview before deciding on radius, border and shadow values.
Example
Input
Default "Frosted" values: background #FFFFFF at 25%, blur 16px, saturation 180%, border 1px #FFFFFF at 40%, radius 20px, shadow 32px #0F172A at 18%
Output
.glass-card {
background: rgba(255, 255, 255, 0.25);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 20px;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}The shadow's vertical offset is half the blur radius (32 ÷ 2 = 16), and a blur or shadow of 0 removes that declaration entirely.
Frequently asked questions
Why are there two backdrop-filter lines in the output?
The first is the -webkit- prefixed version, which Safari still requires, and the second is the standard property. Modern browsers simply ignore the line they do not recognise.
The glass effect does nothing. What is wrong?
backdrop-filter can only blur content that actually sits behind the element. If the card is over a flat colour or an empty area nothing changes — put it on top of an image or gradient first, then adjust blur and saturation.
What do the blur radius and saturation control?
Blur controls how much the content behind is smeared; saturation of 100% means unchanged, and higher values make the colours bleeding through more vivid — the neon preset uses 260%. With blur 0 and saturation 100 the whole backdrop-filter declaration is omitted.
How transparent should the background be?
It depends on the contrast behind it: 20%–30% usually works over light imagery, while dark backgrounds need 40% or more or the card blends into the backdrop. Raising the border opacity as well keeps the edge visible.
Can I enter rgb() or a colour name?
No. Colours must be #RGB or #RRGGBB (the leading # is optional) and opacity is set with the separate slider, so the output is consistently rgba() rather than a mix of notations.
Keywords：glassmorphism玻璃拟态毛玻璃backdrop-filtercss 生成器frosted glasscssblur