CSS Glassmorphism Generator
Dial in a frosted-glass card live and copy ready CSS with the -webkit- prefix.
Glass card
This card is drawn with exactly the CSS shown below — move any slider and watch it change here.
Sample actionAbout CSS Glassmorphism Generator
backdrop-filter blurs whatever is painted behind an element, never the element itself, so a card with an opaque background will never look like glass no matter how far you push the blur — it needs an rgba fill with a low alpha. Blurring also drains colour, which is why production glass CSS nearly always pairs blur() with saturate(150%-180%). This generator writes both, plus the border, drop shadow, inner highlight and an optional fallback block for browsers without support.
How to use CSS Glassmorphism Generator
- 1
Pick one of the five colourful backdrops at the top so the effect is actually visible; the stripes backdrop makes the exact blur radius easy to judge.
- 2
Set blur, layer opacity, tint colour, saturation and brightness with the sliders; the sample card updates instantly.
- 3
Tune the border width and colour, corner radius, drop shadow and inner highlight, or start from one of the five presets.
- 4
If you need older browsers to degrade gracefully, tick the fallback option to append a feature-query block with a more opaque background.
- 5
Type your own class name in the selector field and copy the finished CSS.
Frequently asked questions
Why does my glass effect do nothing?
Three usual causes: the element's own background is fully opaque so nothing shows through; there is only a flat colour behind it, and blurring a flat colour changes nothing; or an ancestor element has a filter, which creates a new backdrop root and cancels the blur entirely.
Is the -webkit- prefix still needed?
For Safari, yes. Chrome and Edge accept the unprefixed property from version 76 and Firefox from version 103, but Safari shipped only the webkit form for years. Keeping both lines costs nothing; put the prefixed declaration first and the standard one second.
Does backdrop-filter hurt performance?
Yes, it is one of the more expensive CSS properties because the browser has to render and blur the region behind the element separately. One header or a handful of cards is fine, but applying it to dozens of list items or to something that scrolls constantly will drop frames, especially on mobile.
Does the generated CSS guarantee readable text?
No, and that is a real limitation of this tool: it only produces the card's appearance and never measures text contrast. Because the backdrop behind the card varies on a real page, text can fall below the WCAG contrast threshold over bright areas, so raise the layer opacity or add a text shadow.