CSS Glassmorphism Generator
Design a frosted-glass card visually and copy the CSS instantly.
About Glassmorphism
A frosted-glass card is a translucent background paired with backdrop-filter: blur(). The blur only becomes visible once there's something behind the element to distort, which is why this preview sits on top of a colored gradient rather than a plain background.
backdrop-filter versus filter: a genuinely different property
It's a common mix-up: the regular filter property blurs an element's own content, its text, its children, everything drawn inside its own box. backdrop-filter does the opposite, it blurs whatever is rendered behind the element, through it, without touching the element's own content at all. That's the entire mechanism behind the frosted-glass look, the card's text stays perfectly crisp while the gradient (or photo, or other UI) sitting underneath gets visibly softened, exactly like looking through actual frosted glass at a blurry world behind it.
Why you need both the tint and the blur, not just one
Blur alone, applied to a fully transparent background, just makes whatever's behind the element look smudged, with nothing communicating that there's a distinct "card" surface there at all. A translucent tint alone, without any blur, just looks like plain see-through color, flat, with no diffusion. The glassmorphism effect specifically depends on stacking both: the semi-transparent rgba() background gives the card a surface and a subtle color cast, while the backdrop blur is what actually sells the illusion of frosted glass by diffusing the detail of whatever sits behind it. Dragging Transparency down to 0% while keeping blur active is a quick way to see how much of the "glass" feeling comes from the tint rather than the blur alone.
Why the border always stays a fixed white, regardless of your tint color
The generated CSS always includes border: 1px solid rgba(255, 255, 255, 0.3) no matter what Glass Tint color you pick. This matches how the effect is traditionally implemented, real glass and frosted acrylic surfaces tend to catch a faint bright highlight along their edge regardless of the surface's own tint, so a neutral white border reads correctly on most backgrounds. If you choose a strongly colored or dark tint, you may want to manually adjust that border's color afterward so it doesn't look mismatched against your specific palette.
Browser support has a real history worth knowing
This is why the tool outputs both backdrop-filter and the prefixed -webkit-backdrop-filter, Safari required the prefix for years after the unprefixed property was already standard elsewhere. Firefox is the other notable case, it didn't enable backdrop-filter by default until version 103 in 2022, years after Chrome and Safari shipped it. If you need to support meaningfully older Firefox versions, wrap the effect in an @supports (backdrop-filter: blur(1px)) feature query and provide a plainer, more opaque fallback background for browsers that fail that check, rather than shipping a card that's just illegibly transparent with no blur.
A performance note before using this heavily
Backdrop blur is genuinely one of the more computationally expensive CSS effects, since the browser has to continuously re-sample and blur whatever's rendered underneath the element, including during scrolling. A single glass card is rarely an issue, but stacking many overlapping glass panels, or applying backdrop-filter to an element that scrolls frequently (like a sticky header over scrolling content), can visibly affect frame rate on lower-powered devices. Test on real mid-range mobile hardware before shipping backdrop-filter across a large or frequently-updating part of a page.
Where this style comes from
The frosted-glass aesthetic traces back to Apple's iOS 7 redesign in 2013, which introduced translucent, blurred navigation bars and control panels throughout the operating system. The term "glassmorphism" itself became popular as a distinct UI design trend around 2020, alongside macOS Big Sur's frosted sidebar panels and later echoed in Windows 11's Fluent Design "Mica" and "Acrylic" materials. Knowing that context is useful when deciding how much to lean on the effect, it reads best sparingly, on a small number of elevated surfaces like modals, sidebars, or floating cards, rather than applied across every panel on a page.
Frequently Asked Questions
What's the actual difference between backdrop-filter and filter?
filter blurs an element's own content, its text and children. backdrop-filter instead blurs whatever is rendered behind the element, letting the element's own content, like text on a glass card, stay perfectly sharp while the background behind it gets diffused.
Why doesn't the blur alone look like glass without the transparent background color?
Blur without any background tint just smudges whatever's underneath with nothing marking a distinct surface. The semi-transparent rgba() background gives the card a visible surface and subtle color cast; combined with the blur, that's what produces the recognizable frosted-glass effect.
Why does the card's border stay white even if I pick a colored tint?
This matches the traditional glassmorphism convention, real translucent surfaces tend to catch a bright highlight along their edge regardless of their own tint. If you choose a strongly colored or dark tint, you may want to manually adjust the border color to better match afterward.
Do I need the -webkit- prefix for backdrop-filter to work?
For Safari, yes, historically it required the -webkit-backdrop-filter prefix even after the unprefixed property was standard elsewhere. This tool outputs both versions together so the effect works correctly across Safari and other modern browsers.
Does backdrop-filter work in all browsers?
It works in all current major browsers, but Firefox didn't enable it by default until version 103 in 2022. If you need to support older Firefox versions, wrap the effect in an @supports feature query with a more opaque fallback background for browsers that don't support it.
Is backdrop-filter expensive for performance?
Yes, relatively. It requires continuously re-sampling and blurring whatever renders behind the element, including during scroll. A single glass card is rarely a problem, but many overlapping glass panels or a backdrop-filter element over frequently-scrolling content can affect frame rate on lower-powered devices.