CSS Glassmorphism Generator
Design frosted-glass UI with backdrop-filter — tune blur, transparency, saturation, border and shadow, preview it over colourful scenes or your own image, and copy cross-browser CSS.
Glass
Border & corners
Shadow
Background (preview only)
Output
backdrop-filter.What Is Glassmorphism?
A UI style that makes panels look like frosted glass floating above a colourful background.
Glassmorphism combines four ingredients: a semi-transparent background, a background blur (with backdrop-filter: blur()), a subtle light border that catches the “edge” of the glass, and a soft shadow that lifts the panel off the page.
backdrop-filter applies effects to whatever is behind the element — unlike filter, which affects the element itself. Adding saturate() makes the colours bleeding through more vivid, which is what gives the effect its glow.
The effect only works when there's something interesting behind the glass: gradients, shapes or photos. On a flat, single-colour background, glass just looks like a faded box — that's why this preview uses colourful scenes and lets you try your own image.
Keep text readable: frosted glass lowers contrast. Use a higher opacity or blur behind body text, keep important text large and bold, and check contrast over the busiest part of your background.
The CSS Behind Frosted Glass
What each generated declaration does.
background: rgba(255,255,255,.2)
A translucent tint. White gives classic frosted glass; dark tints suit dark themes. 10–30% opacity is typical.
backdrop-filter: blur(12px)
Blurs everything behind the element. 8–20px is the sweet spot; more blur means better text readability.
saturate(160%)
Boosts the colours seen through the glass so it looks lit from behind rather than greyed out.
-webkit-backdrop-filter
The prefixed version for Safari before 18 and older iOS devices. Always include it alongside the standard property.
border: 1px solid rgba(255,255,255,.3)
A faint light edge that defines the pane — the detail that makes glass look like glass.
@supports not (backdrop-filter: …)
A fallback that makes the background more opaque in browsers without backdrop-filter, so text stays readable.
How to Use the CSS Glassmorphism Generator
Get your result in under ten seconds.
Pick a background
Choose a preview scene or load your own image to see the glass over your real design.
Tune the glass
Adjust tint, transparency, blur and saturation, then the border, corners and shadow.
Copy the CSS
Set a class name and press Copy CSS. The Safari prefix and fallback are included.
Why Use the CSS Glassmorphism Generator on Developers Web Tools
Fast, accurate and private — built for developers.
Realistic preview
See the real backdrop-filter effect over colourful scenes or your own image.
Cross-browser
Outputs the -webkit- prefix and an optional @supports fallback automatically.
Your own image
Preview over your actual hero image — it stays on your device and is released from memory when replaced.
Ready-to-paste rule
A complete, named CSS class instead of loose declarations.
Smooth
Renders once per frame while you drag the sliders.
Private
Nothing is uploaded — everything runs in your browser.
Frequently Asked Questions
Usually because there's nothing colourful behind the element — backdrop-filter blurs what's behind it, so a plain background shows no effect. Also check that the element's background is translucent (not solid) and that a parent doesn't create an isolated stacking context that hides the content behind it.
Yes, in all current versions of Chrome, Edge, Firefox (since version 103) and Safari. Safari before version 18 needs the -webkit- prefix, which the generator includes.
Blurring the background costs GPU time, especially with large blur values on big or many elements, or while scrolling and animating. Use it for a few key panels (cards, navbars, modals) rather than everything, and keep blur moderate on mobile.
Increase opacity or blur, use a darker or lighter tint that contrasts with the text, make text larger and bolder, and test over the busiest area of the background.
In the rare browsers without backdrop-filter, the glass would be see-through with no blur, making text hard to read. The @supports not block gives those browsers a mostly opaque background instead.
Yes — pick a dark tint such as #0f172a and raise the opacity to 30–50%. Dark glass works well on dark themes and photos.
No. It's displayed from your device using a temporary in-browser link that's released as soon as you remove or replace the image.