Glassmorphism CSS Generator
This glassmorphism generator builds the frosted-glass effect: a translucent background, a backdrop blur, a saturation boost and a light border. The blur is what actually makes it work — a translucent background on its own just looks faded, and it is the blurring of whatever sits behind the element that reads as glass. The saturation boost matters too, because blurring desaturates colours and pushing them back gives the effect the vividness real frosted glass has. The preview sits over a colourful gradient because the effect only exists when there is something behind it to blur.
How it works
Builds the frosted-glass effect: a translucent background, a backdrop blur and a light border. The blur is what makes it work — a translucent background alone just looks faded.
backdrop-filter needs something behind the element to blur, so the effect only shows over content or an image. The -webkit- prefix is included because Safari still requires it.
Everything runs in your browser — nothing you enter is sent to a server.
The four ingredients
- A translucent background — usually white at 10 to 25 percent opacity.
- backdrop-filter: blur() — the part that actually creates the effect.
- A saturation boost — to counteract the desaturation blurring causes.
- A light border — a 1px white border at low opacity, which reads as the edge catching light.
Leave out the blur and you have a faded box. Leave out the border and the edges disappear against a light background.
Contrast is the real problem
A glass panel is transparent by definition, so the contrast between your text and its background changes with whatever passes behind it. Text that is perfectly readable over a dark area of a photograph can become unreadable over a light one.
Either keep the background behind the panel controlled, or reduce transparency enough that contrast holds regardless. Aesthetics that make text unreadable for some users are not a good trade.
Performance
Each backdrop-filter forces the browser to composite and blur a region of the page on every frame. One or two panels is fine; a list where every row is glass will drop frames on a mid-range phone.
Frequently asked questions
Why does my glass effect look like nothing?
Because there is nothing behind it to blur. backdrop-filter blurs the content behind an element, so over a plain background there is no visible effect at all.
What does the saturation do?
Blurring averages colours together and desaturates them. Pushing saturation back up gives the vividness real frosted glass has when you look through it.
Do I need the -webkit- prefix?
For Safari, yes. It still requires -webkit-backdrop-filter, and it is included in the output for that reason.
Is it expensive to render?
Yes, comparatively. A backdrop filter forces the browser to composite and blur a region on every frame. Use it on a few elements rather than many, and be careful applying it to something that animates.
Is the effect accessible?
It needs care. Text over a blurred background can fall below contrast requirements as the background changes. Check contrast against the lightest and darkest content the panel may sit over.
Is anything uploaded?
No. Everything runs in your browser.
Related tools
CSS Box Shadow Generator
This box shadow generator stacks multiple layers with a live preview.
CSS Gradient Generator
This gradient generator builds linear, radial and conic gradients with a live preview.
CSS Border Radius Generator
This border radius generator sets each corner and writes the shortest valid CSS.