Glassmorphism CSS Generator
Design a beautiful frosted-glass panel for cards, navbars and overlays — tune the blur, tint, border and radius live over a real backdrop, then copy the CSS or download a PNG. Free and unlimited.
Glassmorphism in three moves
Glassmorphism is the frosted-glass look behind modern cards, navbars and overlays: a translucent surface that blurs whatever sits behind it, edged with a hairline of light. It reads as depth and focus — and here it is generated live, over a real moving backdrop, so you can see exactly how your panel will behave in the wild.
- 1Set the tone. Pick light or dark glass and a tint, or press Space for a fresh look.
- 2Refine. Dial in the blur, opacity, border and radius until it sits just right.
- 3Export. Copy the CSS straight into your project, or download a PNG of the card.
Design the backdrop your glass sits on with the mesh gradient generator, add SVG wave dividers or a touch of noise & grain — or browse all six generators in the studio.
Good to know
Why does my glass look flat on the page?
backdrop-filter only blurs what is actually behind the element, so glass needs a colourful or busy backdrop to come alive. Place it over an image or a gradient — like the live mesh in the preview — rather than a flat colour.
Will it work in every browser?
backdrop-filter is supported across all current browsers. The copied CSS includes the -webkit- prefix for older Safari, and gracefully falls back to the plain tint where the effect is unavailable.
Light glass or dark glass?
Use light glass over darker, vivid backdrops and dark glass over bright ones — whichever keeps the text on top readable. Toggle between them to compare instantly.
Is it free for commercial use?
Yes. Everything you generate is yours to use freely in personal and commercial work — no sign-up, no limits and no attribution required.
Is this the iOS 26 liquid glass effect?
Not exactly. iOS 26’s liquid glass is a native, platform-level material that refracts and bends content with real-time lighting. This tool generates the web equivalent — a true frosted glass panel made from plain CSS backdrop-filter that you can drop into any site today. Same calm, layered feel, no special API required.
How is liquid glass different from glassmorphism?
They share a backbone but differ in depth. Glassmorphism is the established frosted-glass style — blur, a translucent tint and a lit hairline border. Liquid glass adds physical realism on top: it distorts and refracts what is behind it, with highlights that shift as things move. Think of glassmorphism as the dependable CSS version and liquid glass as the richer, motion-aware evolution.
How do I create a glassmorphism effect in CSS?
Four lines do the heavy lifting: backdrop-filter: blur(20px) saturate(160%) to frost the backdrop, a semi-transparent background as the tint, a faint border for the lit edge, and a border-radius to round it off. This generator wires those exact properties to the sliders and writes the finished rule for you — adjust the look, then copy the CSS.
Does it export Tailwind?
The export is plain CSS, but it maps cleanly onto Tailwind utilities. The blur becomes backdrop-blur-[20px], saturation backdrop-saturate-150, the tint bg-white/10, the edge border border-white/20 and the corners rounded-2xl — using arbitrary values where you need an exact match to the preview.
Glassmorphism and Apple-style liquid glass
The frosted-glass effect has had a long run on the web, and Apple's iOS 26 brought it back into the spotlight with its "liquid glass" look — surfaces that refract and bend the content behind them rather than simply softening it. The two are close cousins: liquid glass is a richer, more physical take on the same idea, but at heart both rely on the humble backdrop-filter. This generator focuses on the part you can ship today in any browser — a clean, tunable frosted-glass panel built from real CSS, not a screenshot — so you get the same calm, luminous feel without waiting on a platform-specific API.
Where does glassmorphism earn its place? It shines on focused, floating surfaces: a login or sign-up card over a vivid backdrop, a sticky navbar that lets the page glow through, modals and overlays that need to feel layered above the content, pricing tables, and media players. Use it where a single glass card draws the eye — and keep flat, opaque surfaces for dense, text-heavy regions where readability matters most.