Is the glassmorphism generator free?
Yes. It is completely free to use, with no signup, no account, and no paywall.
Can I use the generated CSS in commercial projects?
Yes. The CSS you copy from the tool is yours to use in any project, personal or commercial, with no attribution needed.
Does it stay local?
Yes. Everything runs in your browser, and nothing you configure is uploaded to a server.
Is glassmorphism accessible?
Not by default, and this is the strongest argument against using it for anything that carries text. WCAG requires a contrast ratio of at least 4.5:1 for body text, and that ratio has to hold against whatever is actually behind the element. With a translucent panel, the backdrop changes as the user scrolls, so a heading that is perfectly legible over the dark part of a photograph can become unreadable over the bright part. If you use the effect, raise the tint opacity until the worst-case backdrop still passes, and test with the busiest background your page can produce.
Why does the effect do nothing on my page?
Because there is nothing behind it to blur. backdrop-filter operates on the pixels rendered underneath the element, so over a plain white section the blurred result is still plain white and the panel looks like an ordinary translucent box. The effect needs contrast and detail behind it: a photograph, a strong gradient, or overlapping coloured shapes. That is why every glassmorphism example uses a vivid background, and it is a design constraint rather than a stylistic choice.
How expensive is backdrop-filter?
Genuinely expensive. The browser must render the content behind the element into a separate layer, apply a blur to it, and composite the result, and it has to redo that whenever anything behind the element changes. A static card over a static hero image is cheap because the work is done once. A frosted navigation bar fixed over a scrolling page is not: the backdrop changes every frame, so the blur is recomputed every frame, and on a mid-range Android device that shows up as dropped frames while scrolling.
What is the fallback for browsers without backdrop-filter?
A more opaque background. Every browser that does not support the property will ignore it, leaving your panel with only the translucent white tint, which over a busy photograph makes the text illegible. The standard pattern is to declare a substantially more opaque background by default and then use an @supports (backdrop-filter: blur(1px)) block to reduce the opacity and add the blur only where it will actually work. That way, no user ends up with unreadable text.
How do I make a dark glass panel?
Change the tint from translucent white to translucent black, so rgba(0, 0, 0, 0.2) rather than rgba(255, 255, 255, 0.2), and make the border a low-opacity white rather than a bright one. The generated code here always tints with white, which suits a light interface, so a dark-mode variant needs that one substitution by hand. The blur value itself does not need to change.