Get the perfect frosted-glass effect in seconds
Adjust the sliders above and instantly see a glassmorphism card take shape. When you're happy with it, hit Copy CSS and drop the code straight into your project — no account, no install, no waiting.
Glassmorphism is the frosted-glass design style you see everywhere right now: a semi-transparent panel that blurs whatever is behind it, finished with a soft border and a hint of glow. Think iOS widgets, Windows 11 UI panels, and macOS menus.
How to use the glassmorphism generator
- Set your background color — pick any color for the glass panel (white and light blues are classic choices).
- Adjust transparency — drag the opacity slider. Values around 0.15–0.35 give the most convincing frosted look.
- Tune the blur strength — 8–16 px covers most use cases; go higher for a dreamier feel.
- Set a border and corner radius — a 1 px semi-transparent border makes the edge pop cleanly.
- Preview against a colorful background — glassmorphism only reads well when there's something vibrant behind the card.
- Copy the generated CSS and paste it into your stylesheet. Done.
Worked example — frosted profile card
Suppose you want a white frosted card over a gradient background. Here's what the generator might output for those settings:
/* Generated glassmorphism CSS */
.glass-card {
background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); /* Safari support */
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
padding: 2rem;
}Apply that class to a <div> sitting on top of a colorful gradient or image, and you get a clean frosted card that feels native to modern OS design language.
The key properties at a glance
| Property | What it controls | Typical range |
|---|---|---|
background: rgba(…) |
Color + transparency of the glass | Alpha 0.10 – 0.40 |
backdrop-filter: blur() |
How blurry the content behind is | 6 px – 24 px |
border: 1px solid rgba(…) |
The subtle edge highlight | 0.20 – 0.40 alpha |
border-radius |
Rounded corners | 8 px – 24 px |
box-shadow |
Depth and lift off the background | Subtle, low-opacity |
How to write glassmorphism CSS by hand (JavaScript & Python)
If you're building a theme generator or a design-token pipeline, you might want to produce this CSS programmatically. Both snippets below are copy-pasteable and runnable.
JavaScript (Node.js or browser console)
function glassCSS({ r = 255, g = 255, b = 255, alpha = 0.2, blur = 12, radius = 16 } = {}) {
return [
`.glass {`,
` background: rgba(${r}, ${g}, ${b}, ${alpha});`,
` backdrop-filter: blur(${blur}px);`,
` -webkit-backdrop-filter: blur(${blur}px);`,
` border: 1px solid rgba(${r}, ${g}, ${b}, ${Math.min(alpha + 0.15, 1)});`,
` border-radius: ${radius}px;`,
`}`
].join('\n');
}
console.log(glassCSS({ alpha: 0.25, blur: 14 }));Python 3
def glass_css(r=255, g=255, b=255, alpha=0.2, blur=12, radius=16):
border_alpha = min(alpha + 0.15, 1.0)
return f""".glass {{
background: rgba({r}, {g}, {b}, {alpha});
backdrop-filter: blur({blur}px);
-webkit-backdrop-filter: blur({blur}px);
border: 1px solid rgba({r}, {g}, {b}, {border_alpha:.2f});
border-radius: {radius}px;
}}"""
print(glass_css(alpha=0.25, blur=14))How it works under the hood
The magic is almost entirely two CSS properties. backdrop-filter: blur() tells the browser to take a snapshot of everything behind the element and apply a Gaussian blur to it before rendering the element on top. background: rgba() then tints that blurred layer with a semi-transparent color.
The subtle 1 px rgba border catches the light and separates the card from its background — without it, edges look flat. A gentle box-shadow adds real-world depth.
The -webkit-backdrop-filter line is a vendor prefix (a browser-specific version of the property) needed for Safari, which still requires it as of 2024. MDN documents both — see MDN: backdrop-filter for the full browser support table.
When to use glassmorphism — and when to skip it
Great fits
- Hero cards or modal dialogs over rich gradient or photo backgrounds.
- Navigation bars that should feel light rather than solid.
- Dashboard widgets sitting on a colorful data-viz backdrop.
- Any UI where you want that iOS / macOS feel.
When to avoid it
- Plain white or light gray backgrounds — the blur has nothing to work with and the card just looks washed out.
- Accessibility-sensitive text — very low contrast (white text on frosted white) can fail WCAG contrast standards. Always check contrast ratios.
- Performance-critical mobile pages —
backdrop-filteris GPU-heavy. Test on mid-range Android devices before shipping. Consider removing or falling back for users who prefer reduced motion. - Internet Explorer — it has zero support for
backdrop-filter.
Your data stays on your device
The entire glassmorphism generator runs in your browser. No CSS, colors, or settings are ever sent to a server. You can run it offline once the page has loaded — your designs are completely private.
More CSS & developer tools you might find useful
While you're refining your UI, these tools on the site can help with other parts of your workflow:
- Working with API responses? The JSON Beautifier — Format, Validate & Minify JSON Online turns compact API JSON into readable, indented output instantly.
- Need to shrink JSON for production? Try the JSON Minifier — Compress & Minify JSON Online (Free) to strip whitespace before shipping.
- Debugging malformed data? The JSON Validator — Check & Fix JSON Errors Online (Free) pinpoints exactly which line is broken.
Tweak your values in the generator above until the card feels right, then copy the CSS and ship it. Glassmorphism is one of those effects that looks far harder to build than it actually is — a handful of properties and you're done.