Glassmorphism CSS Generator
Design a frosted-glass effect and copy the CSS.
background: rgba(34, 211, 238, 0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
border-radius: 16px;How to use
- 1 Pick a tint colour for the glass.
- 2 Adjust the blur, fill opacity and border opacity sliders.
- 3 Watch the live preview update in real time.
- 4 Copy the generated CSS into your stylesheet.
About Glassmorphism CSS Generator
The Glassmorphism CSS Generator builds the frosted-glass effect — a translucent fill, a backdrop blur, and a faint light border — and shows it on a live preview so you can tune it by eye.
You control the blur radius, the background fill opacity, the tint colour and the border opacity, and the tool assembles the matching CSS for you to copy.
Glassmorphism became popular with operating-system design languages and now appears across cards, navigation bars and modals.
The look depends on a handful of properties working together: a semi-transparent rgba background, backdrop-filter: blur() to soften whatever sits behind the element, a subtle border to catch the light, and a soft shadow for depth.
Remembering the exact syntax — including the -webkit- prefix some browsers still need for backdrop-filter — is easy to get wrong.
This generator pins those pieces together from simple sliders and a colour input, updating the preview instantly so you can find the balance between clarity and frostiness.
The output is plain CSS you can drop straight into a rule, and everything runs locally in your browser with no accounts or uploads.
FAQ
Why does the CSS include -webkit-backdrop-filter?
Some browsers still require the -webkit- prefix for backdrop-filter, so it is included alongside the standard property for the widest support.
Does the effect need a background behind it?
Yes — backdrop-filter blurs whatever sits behind the element, so the frosted look only appears over content or imagery, not a flat solid colour.