Omnibus
Glass
Tint
CSS
background: rgba(255, 255, 255, 0.15);
border-radius: 18px;
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.3);

Glassmorphism CSS generator

Create the frosted-glass look — a translucent background with a backdrop blur and a faint light border. Adjust the blur, transparency, tint color, saturation and corner radius, and see it over a colorful backdrop so you can judge the effect.

Nothing is uploaded; the CSS is generated in your browser. Copy the block — it includes the -webkit-backdrop-filter prefix for Safari support.

Need another effect? See all CSS generators.

More CSS generators

CSS Gradient Generator

Linear, radial & conic gradients with unlimited stops.

CSS Box Shadow Generator

Layer offset, blur, spread, color & inset shadows.

CSS Border Radius Generator

Round each corner independently in px, % or em.

CSS Text Shadow Generator

Offset, blur, color — glow & layered text effects.

CSS Cubic Bezier Generator

Drag the curve to design custom easing.

Glassmorphism CSS Generator — frequently asked questions

What is glassmorphism?
Glassmorphism is a UI style where a panel looks like frosted glass: a semi-transparent background, a blur of whatever sits behind it (via backdrop-filter), and a thin light border. It needs content behind the element to blur.
Why is there a -webkit-backdrop-filter line?
Safari requires the -webkit- prefixed version of backdrop-filter, so the generated CSS includes both to make the blur work across browsers.
Is anything uploaded?
No. The CSS is generated live in your browser with JavaScript — nothing is sent to a server, there's no sign-up, and it's free. A single unobtrusive ad slot covers hosting.

Spotted a bug or have a suggestion?

Found something broken, have an idea, or just want to say thanks about any of our tools? Every message reaches a real person.