CSS
Glassmorphism Generator
Dial in a frosted-glass card and copy the CSS.
Backdrop
Frosted glass card
backdrop-filter support varies by browser — the tint opacity acts as a graceful fallback where blur is unsupported.
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
}How it works
The frosted-glass look is built from three ingredients: a semi-transparent background (an rgba() colour whose alpha you control with the tint-opacity slider), a backdrop blur via backdrop-filter: blur(), and a light border plus corner radius to sell the edge of the pane.
The saturation control bumps saturate() inside the same filter, which makes colours behind the glass read richer — a small touch that separates a convincing effect from a muddy one. Switch backdrops to check the card against different scenes, because a glass surface only looks right relative to what is behind it.
Copy the CSS and apply the .glass class to any element that overlaps a busy background. The output includes the prefixed -webkit-backdrop-filter for Safari, and it is all generated locally — no network, no dependencies.
Frequently asked
What is glassmorphism?+
Glassmorphism is a UI style where an element looks like frosted glass: a semi-transparent background sits over a blurred view of whatever is behind it, usually with a thin light border and rounded corners. The effect comes almost entirely from the CSS backdrop-filter property combined with a translucent background colour.
How do I create a glassmorphism effect in CSS?+
Give the element a semi-transparent background (an rgba colour), then add backdrop-filter: blur(...) so it frosts what is behind it, a subtle 1px light border, and a corner radius. This tool builds all of that for you and outputs the exact rule — including the -webkit-backdrop-filter line Safari still needs.
Why do I need -webkit-backdrop-filter?+
Safari has long required the -webkit- prefixed version of backdrop-filter, and some versions only apply the blur with it present. The generator always emits both the standard and prefixed properties so the frosted effect works across Chrome, Safari and Firefox without you remembering the fallback.
Does backdrop-filter work in every browser?+
Modern versions of Chrome, Edge, Safari and Firefox support it, but older browsers and a few low-power modes ignore it. That is why the tint opacity matters: even where the blur is dropped, the semi-transparent background keeps text readable, so the card degrades gracefully rather than becoming invisible.
Is anything uploaded when I use this tool?+
No. The preview, the colours and the generated CSS are all computed in your browser, so nothing you configure is sent to a server and you can use the tool offline.
More free tools
All toolsCSS Selector Tester
Paste HTML, type a selector, see exactly what it matches.
Open toolCSS Grid Generator
Build a CSS grid visually and copy the code.
Open toolCSS Box-Shadow Generator
Design layered box-shadows with live sliders and copy the CSS.
Open toolMore tools shipping weekly.
Design it, then prove it looks right
This tool shows the effect updating live as you tune it. Shotline brings that immediacy to feedback — clients drop pinned comments on the real page, so “the glass card is too transparent here” lands with the exact element attached.
No signup needed. Free demo canvases stay live for 72 hours.
or start your 14-day free trial — no card required.