Design / CSS

Glassmorphism CSS Generator (Frosted Glass Effect)

Create the frosted-glass look with CSS backdrop-filter: adjust the blur, tint colour, opacity, saturation, border, and corner radius over a colourful preview, and copy CSS that works in every current browser.

Glassmorphism CSS Generator (Frosted Glass Effect): backdrop-filter: blur() blurs whatever lies behind the element, and saturate() makes those colours richer. A semi-transparent background tints the glass, and a faint light border catches the edge, as on real glass. The -webkit- prefixed line covers Safari before version 18. Runs 100% locally in your browser with zero server file uploads.

Category: Developer tools
Runs: In your browser
Cost: Free · no sign-up
Availability: Ready to use

Glassmorphism generatorLocal processing

Runs entirely in your browser

Frosted glassThe colours behind this card are blurred.

Tint#ffffffOpacity25%Blur12 pxSaturation180%Border opacity30%Corner radius16 px Shadow

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

The effect needs something colourful behind the element: backdrop-filter blurs whatever is underneath, and the semi-transparent background lets it show through. The -webkit- line is for Safari before version 18. Check that text on the glass keeps enough contrast over every part of the background.

Accessibility

Some readers turn on reduced transparency in their system settings. The prefers-reduced-transparency media query, supported in Chromium-based browsers, can swap the glass for a solid background for them.

Pairing with a shadow

A soft, wide shadow lifts the card off the background; tune it with the box shadow generator and replace the box-shadow line.

How to use it

Set the blur, opacity, and saturation.
Pick the tint, border, and corner radius.
Copy the CSS and put the element over a colourful background.

Privacy & limitations

Everything runs in your browser.

Related tools

Frequently asked questions

Why does my glass look plain?

There must be something colourful or detailed behind it; over a plain colour, a blur has nothing to blur.

Is backdrop-filter slow?

It costs more than most CSS, especially when large areas scroll over moving content; keep the blurred areas small and avoid stacking many of them.

Is the text readable?

Check it: contrast changes across the background. A darker tint, more opacity, or a text shadow helps.

Free tool · runs in your browser · no account required