Glass tint

Blur

8px

Saturation

180%

Transparency

25%

Corner radius

16px

Border

30%

Backdrop (preview only)

Preview

Glassmorphism

Code

Everything runs in your browser — your colors and settings are never uploaded.

Build the popular glassmorphism (frosted-glass) UI effect just by moving a few sliders. Glassmorphism places content on a translucent, frosted panel that lets the background show through — created by combining a background blur (`backdrop-filter: blur()`), a semi-transparent fill, a thin light border and a soft shadow. This generator lets you tune the blur strength, saturation, transparency (fill opacity), corner radius, border strength and the glass tint independently, with every change reflected live on the preview card. The preview sits over a vibrant two-color gradient, so the colors behind blur and bleed through — letting you see exactly how the frosted effect looks. The output switches between "CSS" and "Tailwind": CSS gives you `background`, `backdrop-filter` (with the `-webkit-` prefix), `border-radius`, `border` and `box-shadow`, while Tailwind gives arbitrary-value classes like `backdrop-blur-[...]`. No need to open Figma or any design tool — the glassmorphism code is done right in the browser. Your colors and settings stay in your browser and are never uploaded, stored, or sent to a server.

How to use

Adjust the blur, saturation, transparency, corner radius and border sliders, plus the glass tint. The preview updates instantly.
Change the two backdrop colors to see how colors blur and bleed through the frosted glass.
Switch the output to "CSS" or "Tailwind", then "Copy" and paste it into your element's styles.

FAQ

What is glassmorphism?

It's a web design style that puts content on a translucent, frosted-glass panel so the background shows through. It combines a background blur (`backdrop-filter: blur()`), a semi-transparent fill, a thin light border and a soft shadow to create a sense of depth and a modern, glassy look.

Is it pure CSS?

Yes. Paste the generated `background`, `backdrop-filter`, `border-radius`, `border` and `box-shadow` onto your element and it works. Because the blur acts on whatever is behind, use the translucent card over a colored background, image or other element so the effect is visible.

Can it output Tailwind classes too?

Yes. Switch the output to "Tailwind" and it generates arbitrary-value classes such as `backdrop-blur-[...]`, `backdrop-saturate-[...]`, `bg-[rgba(...)]`, `rounded-[...]` and `border-[rgba(...)]`. Paste them straight into the element's class list.

Why might backdrop-filter not work?

Some older browsers or settings don't support `backdrop-filter`. The output also includes `-webkit-backdrop-filter` for Safari, so keep both. And remember the frosted effect only shows when there's something behind the card (a background color, image or another element) for it to blur.

Are my colors and settings uploaded anywhere?

No. Generation and the preview run entirely in your browser. The colors and slider values you choose are never uploaded, stored, or sent to a server — the tool is fully local.