Loona Glassmorphism Generator — Frosted Glass CSS Cards
Glassmorphism only works over colour: a blur slider on a white page teaches nothing. This preview floats your card over a vivid gradient, exactly as it will live in a real design.
How to use the Glassmorphism Generator
- Tune the blur first — 10–16 px is the classic frost.
- Set tint opacity low (15–30%) so the background glows through; raise saturation to keep colours juicy behind the blur.
- Copy the .glass-card CSS. The -webkit- line is included for Safari.
How it works
backdrop-filter blurs whatever is painted behind the element, not the element itself — which is why the tint must stay translucent. The saturation boost compensates for the grey that blurring adds. A 1 px semi-white border and a soft shadow complete the "sheet of glass" illusion.
Worked example
A dashboard’s stat cards go frosted over the brand gradient — same data, suddenly a 2026 product. The CSS came from here in one copy.
Frequently Asked Questions
Why does my glass look grey?
Raise the saturation slider and lower the tint opacity — blur averages colours toward grey, and these two controls counteract it.
Does it work in all browsers?
backdrop-filter is supported in all modern browsers; the output includes the -webkit- prefix for Safari. On very old browsers the card simply appears as a translucent panel.
What background should glass sit on?
Colourful, fairly busy backgrounds show the frost best: gradients, photos, mesh gradients (make one with our Mesh Gradient Generator).
Is the effect expensive?
Large blurred areas cost some GPU; keep glass panels reasonably sized on low-end phones.
More Colour & CSS Generators
The visual Color Palette Generator and the basic Gradient Generator live in Loona Image Tools; this family is the CSS-developer-grade set (multi-stop gradients, exact code output).