Glassmorphism CSS Generator
Create frosted-glass “glassmorphism” CSS visually with simple sliders.
Adjust blur, opacity, border, and shadow in real time, then copy the code with one click.
This tool has been used … times.
background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
What is glassmorphism?
Glassmorphism is a UI design style that makes elements look like frosted glass, letting the background show through with a soft blur. It is widely used in modern OS design, including macOS, iOS, and Windows 11.
In CSS, the effect is built mainly with the backdrop-filter blur, combined with a semi-transparent background color, a thin border, and a soft shadow.
How to use
- Switch the preview backdrop with “Background”. How the glass looks depends heavily on what is behind it.
- Pick a preset close to the look you want from “Presets”.
- Fine-tune blur, opacity, saturation, radius, border, and shadow with the sliders.
- Change the glass color with “Tint”. White is the classic choice; a dark color turns it into dark glass.
- When you are happy with the result, press “Copy” and paste the CSS into your site.
How to apply the CSS
Paste the copied code into the CSS of the element you want to turn into glass.
.glass-card { background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); }
* backdrop-filter blurs whatever is behind the element. The effect is invisible unless the parent or page background has an image, gradient, or other content behind the glass.
* -webkit-backdrop-filter is included for Safari support. The code works in all major modern browsers.
Tips for a beautiful result
The effect is barely visible on a flat solid color. Place the glass over a photo or gradient.
The stronger the blur, the lower you can keep the fill opacity for a more elegant look.
A thin white border (1px) and a soft shadow make the element feel like a real pane of glass.