Glassmorphism Generator
Create frosted-glass panels with backdrop blur, transparency, saturation and a subtle border, previewed over a colourful background.
Free · No upload · 100% on your device
How to use Glassmorphism Generator
- Choose the settings in the side panel.
- The result updates instantly. Select “Update” for a fresh one.
- Copy the result or download it.
Private by design. Everything you type, open or record is processed in this browser tab and is never uploaded to KittySuite.
About Glassmorphism Generator
The effect needs something colourful behind the panel; on a flat background it looks like a plain translucent box. backdrop-filter works in all current browsers; the -webkit- line is included for older Safari.
Everything is calculated in this browser tab and nothing you enter is sent anywhere. It keeps working offline once the page has loaded.
Glassmorphism Generator: frequently asked questions
How do I create a glass effect in CSS?
Adjust the blur, transparency, tint, saturation and corner radius while watching the preview, then copy the CSS.
Why does my glass panel look like a plain box?
The effect needs something colourful behind it; on a flat background it looks like a plain translucent box.
Does backdrop-filter work in Safari?
It works in all current browsers. A -webkit- line is included for older Safari.
Can I add a border?
Yes. “Light border” adds the subtle edge that makes glass panels stand out.