🔲✨

Glassmorphism CSS Generator

Frosted-glass cards with backdrop blur – copy the CSS.

Glass tint

Opacity (%)

Blur (px)

Saturation (%)

Corner radius (px)

Glass card

Result

.glass {
  background: rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.33);
  border-radius: 16px;
}

Runs entirely in your browser. Nothing is sent anywhere.

How it works

1Paste or type your text.
2Choose the options you need.
3Copy or download the result.

About this tool

Glassmorphism CSS Generator: Frosted-glass cards with backdrop blur – copy the CSS. Paste your text and the result appears immediately, ready to copy or download. Everything happens locally in your browser — nothing you paste is uploaded or stored.

How do I use the Glassmorphism CSS Generator?

Paste or type your text. Choose the options you need. Copy or download the result.

Is the Glassmorphism CSS Generator free?

Yes. It is completely free with no sign-up, no usage limits and no watermark.

Is my data sent to a server?

No. Everything is calculated locally in your browser. Nothing you enter is uploaded, logged or stored.

Does it work on my phone?

Yes. It works in any modern browser on Android, iPhone, iPad, Windows, Mac and Linux — no app needed.

Glassmorphism CSS Generator

How it works

About this tool

Related tools