Frosted glass is a filter applied to what's behind the element, not the element itself
Most CSS effects — box-shadow, border-radius, background-color — style the element you're applying them to. backdrop-filter is different: it filters whatever is visible behind the element through the element's transparent or semi-transparent area, the same way looking through actual frosted glass blurs the scene behind it rather than changing the glass itself. This is the property that makes glassmorphism possible at all — a semi-transparent background color alone just looks like a flat tinted box, but backdrop-filter with blur genuinely reads as glass because the content behind it is visibly, believably distorted.
This distinction is exactly why glassmorphism requires something visually interesting behind the glass element to work — filtering flat, empty space produces a flat, empty result, no matter how the blur and saturation sliders are set.
What each slider actually controls in the generated CSS
| Slider | CSS property/value affected | Visual effect |
|---|---|---|
| Blur | backdrop-filter: blur() | Controls how frosted vs. sharp the background appears through the glass |
| Tint opacity | background-color alpha | Controls how strongly the glass's own color shows through |
| Saturation | backdrop-filter: saturate() | Boosts color vividness of what's behind the glass |
| Border radius | border-radius | Rounds the glass panel's corners |
| Border opacity | border-color alpha | Controls visibility of the glass edge highlight |
Designing your glass panel
Adjust the Blur slider to control the frosted effect's intensity.
Pick a tint color and set its opacity and saturation.
Tune the border radius and border opacity for the glass edge.
Copy the CSS — both backdrop-filter and -webkit-backdrop-filter are emitted so the effect works in Safari.
Why saturation is the detail that separates good glassmorphism from flat blur
Saturation is the second argument passed to backdrop-filter, as in backdrop-filter: blur(10px) saturate(150%). It's easy to treat blur as the whole effect and saturation as a minor extra, but saturation is doing genuine visual work: boosting it makes the colors visible through the glass more vivid than they'd naturally appear, which is precisely the hallmark that makes glassmorphism look like polished glass rather than a plain blurred screenshot. A blur-only glass panel over a photo often looks muddy and washed out; adding saturation on top brings the colors back to life through the frosted effect, closer to how light actually behaves passing through tinted, textured glass.
Why the background behind your glass element matters as much as the CSS itself
When implementing the copied CSS on your own site, place glass elements over genuinely visually rich backgrounds — hero images, colorful gradients, video backgrounds — rather than flat, single-color sections, or the effect will read as flat and unconvincing regardless of how carefully the sliders were tuned.
Why the -webkit- prefix is included in every export
Safari implemented backdrop-filter before it was fully standardized, under the vendor-prefixed name -webkit-backdrop-filter, and continues to require that prefixed version specifically for the effect to render — the unprefixed backdrop-filter alone won't work reliably across all Safari versions. The generated CSS includes both the standard backdrop-filter and the -webkit- prefixed version together, which is the practical, safe approach: browsers that don't recognize a given property simply ignore it, so including both costs nothing on browsers that only need one, while guaranteeing the effect actually renders on Safari.
What happens on unsupported browsers
backdrop-filter is supported across all modern browsers — Chrome 76+, Safari 9+, Firefox 103+ — so unsupported browsers are increasingly rare, but it's worth knowing what happens if a visitor's browser doesn't support it: the element gracefully falls back to displaying its semi-transparent background color alone, without the blur or saturation effect. This means glassmorphism degrades to a plain tinted panel rather than breaking or disappearing entirely, which is an acceptable fallback for most designs as long as the tint color itself still reads reasonably against whatever's behind it.
Common mistakes
Placing a glass panel over a flat, single-color background and being disappointed the effect looks weak — glassmorphism needs visual complexity behind it to distort and blur.
Cranking blur high while leaving saturation untouched, producing a muddy, washed-out look instead of vivid glass.
Forgetting to include the -webkit- prefixed version when copying only part of the generated CSS, breaking the effect specifically in Safari.
Assuming the fallback on unsupported browsers means the design breaks — it degrades gracefully to a semi-transparent panel, not a broken layout.
Real use cases
Designing a frosted navigation bar or card overlay for a landing page with a colorful hero image or gradient background.
Creating a glass-style modal or notification panel that sits over dynamic, photographic content.
Building a dashboard widget with a modern frosted-glass aesthetic over a gradient background.
Prototyping a UI design system's glass-panel component before implementing it across a larger site.
Frequently asked questions
Q: Why is -webkit-backdrop-filter included?
A: Safari requires the -webkit- prefix for backdrop-filter to render correctly. The generated CSS includes both the standard and prefixed versions so the effect works everywhere.
Q: What does the saturation slider do?
A: It's the second argument to backdrop-filter, like saturate(150%). Boosting saturation makes colors behind the glass appear more vivid, which is the hallmark of a convincing glassmorphism look.
Q: Where should I place a glass element?
A: Glass needs something colorful or photographic behind it to look good. The live preview uses a vibrant gradient specifically so you can evaluate the effect clearly.
Q: Will the effect work on older browsers?
A: backdrop-filter is supported in all modern browsers, including Chrome 76+, Safari 9+, and Firefox 103+. If unsupported, the element falls back to its semi-transparent background color.
Q: Is my data sent anywhere?
A: No — the entire preview and CSS generation happens in your browser, with zero network calls.
Q: My glass panel looks flat even with the CSS copied correctly — what's wrong?
A: Check what's behind the panel on your actual site — if it's a plain flat background rather than a photo or gradient, the blur and saturation have nothing visually rich to work with, which is the most common reason glassmorphism looks weak outside the tool's preview.
Design your glass panel now
Build your frosted-glass CSS with the Glassmorphism Generator. Need matching rounded corners or a subtle shadow? Try the Border Radius Generator and Box Shadow Generator. Building the vibrant background to place it over? Check the Gradient Generator.
