Glassmorphism generator
Create a frosted-glass effect (background blur) with live preview and copy-ready CSS.
- Instant
- Free
- Private (processed locally)
- No sign-up
A glass effect, without guesswork
Set the blur, transparency, radius and border: the frosted-glass panel updates live over a colorful background, and the full CSS (with Safari prefix) is ready to copy.
-
Set the blur
How strongly the background is blurred.
-
Tune the glass
Transparency, radius, border, tint.
-
Copy the CSS
Apply it to your card or bar.
The generated CSS (default settings)
| Property | Value |
|---|---|
| background | rgba(255, 255, 255, 0.25) |
| backdrop-filter | blur(8px) |
| border-radius | 16px |
| border | 1px solid rgba(255, 255, 255, 0.18) |
The -webkit-backdrop-filter prefix is added for Safari. The effect is only visible over a non-flat background. Everything is generated locally.
Frequently asked questions
What is glassmorphism?
A UI style mimicking frosted glass: a semi-transparent panel that blurs whatever passes behind it, with a thin light border. Widely used for modern cards, bars and windows.
How is the effect achieved in CSS?
With backdrop-filter: blur(...) that blurs the background, a semi-transparent rgba fill, a border-radius and a light rgba border. The tool generates these lines plus the -webkit- prefix for Safari.
Why must the background be colorful?
The blur is only visible if there is something to blur behind the panel. On a flat background the effect disappears. The preview therefore puts the glass over a gradient to show it clearly.
Is it compatible with all browsers?
backdrop-filter is well supported on recent browsers (with -webkit- for Safari). On very old browsers, plan a slightly more opaque fallback fill to stay readable.