Glassmorphism Generator
Design a frosted-glass panel with live blur, tint and border controls, then copy the CSS.
Glassmorphism
Frosted glass, generated in your browser.
How it works
Glassmorphism is a frosted-glass look built from three ingredients: a semi-transparent
background colour, a backdrop-filter: blur() that blurs whatever sits behind the
element, and a thin light border that catches the "edge" of the pane. A soft drop shadow
lifts the panel off the background and a little saturate() inside the backdrop
filter makes the colours bleeding through look richer instead of washed out. Move any slider
or field here and the preview and the CSS update instantly, so you can tune the effect by eye.
Two things decide whether the effect actually reads as glass: the blur must be strong enough
(roughly 6–20px) and the background behind it must have some contrast — glass over a flat
colour looks like a plain translucent box. That is why the preview sits on a colourful stage
you can switch between. The generator always emits the -webkit-backdrop-filter
prefix alongside the standard property for older Safari and iOS. Copy the declarations, copy a
ready-made .glass { … } rule, or download it as a .css file.
Everything runs locally in your browser with plain JavaScript — nothing is uploaded, and
there are no ads or sign-ups.
Frequently asked questions
How do I create a glassmorphism effect in CSS?
Give the element a semi-transparent background such as rgba(255, 255, 255, 0.25), add backdrop-filter: blur(8px) so the content behind it is blurred, round the corners, and finish with a thin light border like 1px solid rgba(255, 255, 255, 0.18) plus a soft drop shadow. This generator builds exactly that stack for you and shows the result live.
Which browsers support backdrop-filter?
All current versions of Chrome, Edge, Firefox, Safari and the mobile browsers support backdrop-filter. Safari and older iOS versions need the -webkit-backdrop-filter prefix, which this tool always includes in the generated CSS. Browsers without support simply show the semi-transparent background with no blur, so the design degrades gracefully.
Why is my glassmorphism blur not showing?
The three usual causes are: the background behind the element is a flat colour, so there is nothing visible to blur; the element's own background is fully opaque, which hides the blurred backdrop; or a parent has overflow, filter or transform set, which creates a containing block that clips the backdrop. Use a colourful or image background, keep the tint opacity below about 50%, and check the parent elements.