Glassmorphism Generator

Features

• Blur, transparency and saturation control
• Custom tint colour and border strength
• Four preview backgrounds to judge against
• Optional drop shadow and noise texture
• Includes the -webkit- prefix for Safari

How to use it

1. Adjust the blur and transparency.
2. Pick a background that resembles your real one.
3. Tune the tint and border until it reads as glass.
4. Copy the CSS, the Safari prefix is included.

Making glassmorphism work in practice

The effect depends entirely on backdrop-filter, which blurs whatever is painted behind the element rather than the element itself. That means it does nothing over a flat background, glass only reads as glass when there is detail behind it to distort. If your preview looks like a plain translucent box, the problem is the backdrop, not the settings.

Legibility is the recurring failure. A blurred backdrop still varies in brightness, so text over glass can be perfectly readable in one scroll position and unreadable in another. The fixes are to raise the tint opacity above about 15%, add saturation to push the backdrop toward a consistent tone, and always verify contrast against the lightest and darkest points the backdrop reaches. A glass panel that passes WCAG AA over one photo may fail badly over another.

There is a real performance cost too. backdrop-filter forces the browser to composite and blur a region on every frame, which is expensive, especially on mobile, and especially if the content behind it is animating or scrolling. Use it on a handful of elements rather than throughout an interface. Safari also still requires the -webkit- prefix, and Firefox only enabled it by default relatively recently, so include a solid-colour fallback inside an @supports query for browsers that lack it.