Glassmorphism Generator

Features

• Glass tint and opacity adjusted separately — translucency is the foundation of the effect
• Backdrop blur from 0 to 60px, with a live preview
• Saturation from 100% to 300%, making the colours behind the glass richer
• A light border you can switch off, with its own colour and opacity
• Adjustable corner radius
• Both `backdrop-filter` and `-webkit-backdrop-filter`, so iOS actually blurs
• A colourful backdrop behind the preview, so blur and saturation are visible
• A complete copyable CSS rule below, with a `.glass` selector
• Values are clamped and colours validated, so the CSS stays valid
• Everything is computed in your browser; nothing is uploaded

How to use

1. Start with opacity: too low and there is no glass, too high and it is a solid block
2. Then adjust the backdrop blur and watch how much the colours behind get mixed
3. For a brighter, more translucent look, raise the saturation
4. When it looks right, hit copy and take the whole rule

FAQ

Why does my glass not work on iPhone?

It is almost always the missing `-webkit-backdrop-filter`. Safari only honoured the standard property from 18, and its mobile share is large — so the tool emits both lines. There is also an easily missed precondition: there has to be something behind the element (an image, a colour block, another element). Blurring a plain white page gives you white, which looks like nothing happened.

What is the difference between `backdrop-filter` and `filter`?

In one line: `filter` blurs the element, `backdrop-filter` blurs what is behind it. `filter: blur(12px)` on an element makes that element and its text blurry; `backdrop-filter: blur(12px)` keeps the element crisp while blurring what shows through from behind — only the latter is frosted glass. You can use both together (blur behind, then adjust the element itself slightly), but do not reach for `filter` as the glass recipe.

What opacity should I use?

Usually between 10% and 30%. Below 10% the glass all but disappears and the border and radius lose their footing; above 30% it reads more and more like an ordinary opaque block, the content behind stops being visible, and the glass feeling goes with it. The right value also depends on the contrast behind: the busier the backdrop, the lower the opacity should be (letting more through) while the border carries the outline.

Does this effect cost performance?

Yes, more than it looks. `backdrop-filter` requires the browser to lift the area behind the element and blur it separately, which is an ongoing cost during scrolling or animation — especially with several glass elements stacked, and low-end devices drop frames. Practical advice: not too many per screen, do not let it move around a large area while scrolling, and do not animate the glass element itself. It suits fixed overlays (a nav bar, a card), not a full-screen scrolling background.

How do I keep text readable on frosted glass?

This is the biggest trap in the style: once the backdrop is blurred, the lightness under the text is unknown — the same nav bar reads clearly over a light image and muddily over a dark one. A few practical moves. Give the glass layer a slight overall tint (a white with a hint of the brand colour rather than pure white) so the text contrast varies less. Add a subtle `text-shadow`. And the most tedious but reliable option: test the lightest and darkest content that scrolls under it, and only accept it if both are readable.