Skip to content
I Hate Online Tools

Glassmorphism generator

Tune blur, tint, and border for a frosted-glass CSS card.

Runs in this tab. The file stays here.

Preview
Frosted glass
CSS
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

This runs in your browser. Nothing is uploaded.

About Glassmorphism generator

Tune blur, tint, saturation, border, and radius to get a frosted-glass CSS card, with a live preview over a colourful backdrop.

The frosted-glass look is made of three things: a semi-transparent background, a backdrop-filter that blurs and saturates what's behind the element, and a thin light border. Each has sliders here. Blur runs from 0 to 40 pixels, background opacity and border opacity are percentages, saturate goes from 50 to 250 percent, and radius to 48 pixels. A colour box sets the tint, white by default. The preview sits on a bright gradient with a couple of solid circles, so you can see what the blur is doing at the edges.

The CSS it writes is six lines: the translucent background, backdrop-filter and the -webkit- version Safari needs, a one-pixel border in the tint colour, the radius, and a fixed soft box-shadow. The shadow isn't adjustable, so edit it by hand if you want a different one. Colours are output as rgba, which is easy to adapt, and nothing is tied to this page's fonts or layout.

Two cautions. backdrop-filter has a real cost on the GPU, so a screen full of large glass panels can stutter, especially on phones. And glass is a legibility trap: the more transparent the tint, the more the text on it depends on whatever happens to be behind. Use a stronger tint or a darker text colour than looks right in the preview, and check contrast against your actual background rather than the demo one.

How to use Glassmorphism generator

  1. 1Set blur, background opacity, saturation, border opacity, and radius.
  2. 2Choose the tint colour.
  3. 3Check the card over the preview backdrop.
  4. 4Copy the CSS.

What it won't do

  • Fixed box-shadow; one border style (1px solid, in the tint colour).
  • Preview uses a demo backdrop; real results depend on what's behind your element.
  • backdrop-filter can be slow when many large panels are stacked.

Common questions

Why doesn't the blur show on my page?

backdrop-filter only blurs what is behind the element. If the thing behind is a flat colour, there's nothing visible to blur. The element also needs a transparent or semi-transparent background, or it hides what's behind it entirely.

Do I need the -webkit- line?

Include it for Safari, where older versions only understand the prefixed property. The page writes both lines for you.

Can I change the shadow?

Not on this page. It adds a fixed soft shadow. Use the box-shadow generator, then swap the line in the CSS you copied.

Related tools

Why this one doesn't upload your file

There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation

Install the app