Why doesn't the blur show on my page?

backdrop-filter only shows an effect when there is something behind the element to blur, such as an image or gradient. Make sure the element is layered over a colourful background.

Is backdrop-filter supported everywhere?

It works in current Chrome, Edge, Safari and Firefox. Add the -webkit- prefixed line, included in the output, for older Safari.

Does glassmorphism hurt performance?

Large blurred areas can be costly on low-end devices, so use it on small panels and avoid animating the blur value.

Is Glassmorphism Generator free to use?

Yes — Glassmorphism Generator is completely free, with no registration, no usage limits and no watermarks.

Does this tool upload my files to a server?

No. All processing happens entirely in your browser — nothing is uploaded, stored or shared.

Glassmorphism Generator

Generate frosted-glass CSS with backdrop blur.

Glassmorphism is a UI style that mimics frosted glass: a translucent panel that blurs whatever is behind it.

About Glassmorphism Generator

Create the popular frosted-glass UI effect with backdrop-filter blur, transparency, saturation and border controls. Preview it over a colourful backdrop and copy the CSS, including the -webkit prefix for Safari.

Glassmorphism is a UI style that mimics frosted glass: a translucent panel that blurs whatever is behind it. This generator produces the CSS — background, backdrop-filter blur, border and shadow — with a live preview over a colourful backdrop.

How to use Glassmorphism Generator

Adjust blur, transparency and saturation until the glass looks right over the preview.
Tune the border opacity, corner radius and tint colour.
Copy the generated CSS, which includes the -webkit-backdrop-filter line for Safari.

Key features

Controls for blur, transparency, saturation, border and radius.
Preview over a vibrant gradient so the effect is easy to judge.
Cross-browser CSS with the -webkit prefix included.

Common use cases

Navigation bars and sticky headers that blur the content beneath.
Login cards, pricing cards and dashboard widgets.
Modern app and landing-page designs.

Frequently asked questions

Related tools

Color Picker

Click any pixel in an image to get its exact color code.

CSS Gradient Generator

Create linear, radial and conic CSS gradients visually.

Color Converter

Convert colours between HEX, RGB, HSL, HSV, CMYK and OKLCH.

Color Contrast Checker

Check WCAG contrast ratio between text and background colours.