Glassmorphism CSS Generator — backdrop-filter Blur

How to use the Glassmorphism Generator

Adjust blur, saturation and background opacity until the card looks right over the sample background.
Switch the preview background to check readability on busy images or dark designs.
Copy the CSS (with prefix and fallback) or the Tailwind arbitrary-value classes.
Remember: the effect only shows when there is something colourful behind the element.

What is glassmorphism?

Glassmorphism is the frosted-glass look popularised by macOS and Windows 11: a semi-transparent panel that blurs whatever is behind it, usually with a thin light border and soft shadow. In CSS it is created with backdrop-filter: blur() plus a translucent background colour.

The CSS explained

background: rgba(255,255,255,.18) — the tint. Too opaque and the blur disappears; too transparent and text becomes hard to read.
backdrop-filter: blur(12px) saturate(160%) — blurs and slightly boosts the colours behind the element, which keeps the glass from looking grey.
-webkit-backdrop-filter — Safari still needs the prefix for reliable support, and it’s the line developers most often forget.
A 1px semi-transparent white border defines the edge of the glass.

Performance & accessibility

Backdrop blur is GPU-intensive: avoid large blurred areas that animate or sit over video, and test scrolling on low-end phones. Always check text contrast over the most demanding part of the background with the Contrast Checker, and keep the fallback rule so browsers without support get a readable, more opaque background.

In Webflow

Webflow’s Style panel has a Backdrop filters option under Effects — add Blur (and Saturate) there, set the background colour with alpha, and Webflow outputs the needed CSS.

Tools that pair well with the Glassmorphism Generator

Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
CSS Gradient Generator — Design a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback colour.
Tailwind Arbitrary Value Generator — Paste CSS and get Tailwind’s bracket syntax right the first time — spaces turned into underscores, type hints added, unsupported properties wrapped as arbitrary properties.
HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.

Frequently asked questions

Why doesn’t backdrop-filter work?

The element’s background must be at least partly transparent and there must be visible content behind it. Also check that no parent creates a new stacking context that hides the content, and include the -webkit- prefix for Safari.

Is backdrop-filter supported in all browsers?

All current versions of Chrome, Edge, Firefox and Safari support it (Safari via the prefix in older versions). The generated fallback covers anything else.

What is the difference between filter: blur and backdrop-filter: blur?

filter blurs the element itself, including its text. backdrop-filter blurs only what is behind the element, keeping its content sharp.

How do I add glassmorphism in Webflow?

Select the element, open Style → Effects → Backdrop filters, add Blur, and give the background a colour with transparency.

Glassmorphism CSS Generator (backdrop-filter)

CSS

Tailwind classes