Why is -webkit-backdrop-filter included?

Safari requires the -webkit- prefix for backdrop-filter. The generated CSS includes both standard and prefixed versions so your effect works everywhere.

What does the saturation slider do?

It's the second argument to backdrop-filter: `saturate(150%)`. Boosting saturation makes colors behind the glass more vivid, which is the hallmark of a good glassmorphism look.

Where should I place a glass element?

Glass needs something colorful or photographic behind it to look good. The live preview already uses a vibrant gradient so you can see the effect clearly.

Will the effect work on older browsers?

Backdrop-filter is supported in all modern browsers (Chrome 76+, Safari 9+, Firefox 103+). If unsupported, the element falls back to its semi-transparent background color.

Is my data sent anywhere?

No — the entire preview and CSS generation happens in your browser. There are zero network calls.

Glassmorphism Generator

Design frosted-glass cards with blur, tint and saturation — copy CSS.

100% private — no uploads Design & CSS ToolsFree & unlimited Read tutorial

See how it works

Watch a quick simulation of this tool in action — no file needed.

How to use Glassmorphism Generator

Follow these steps — everything happens instantly in your browser.

1
Step 1. Adjust the Blur slider to control the frosted effect.
2
Step 2. Pick a tint color and set its opacity and saturation.
3
Step 3. Tune the border radius and border opacity for the glass edge.
4
Step 4. Copy the CSS — both backdrop-filter and -webkit-backdrop-filter are emitted for Safari.