What is glassmorphism?

A UI style with translucent, frosted-glass surfaces created using background transparency plus a backdrop blur, over a colourful background.

Does backdrop-filter work everywhere?

It's supported in modern browsers. The generated CSS includes the -webkit- prefix for Safari compatibility.

Is my design uploaded anywhere?

No. The CSS is generated live in your browser — nothing is sent to a server.

Glassmorphism Generator

Create frosted-glass (glassmorphism) CSS with live controls for blur, transparency, saturation and border. Copy the CSS instantly — runs in your browser.

Glass card

Blur12pxOpacity20%Saturation130%Radius16pxBorder30%Tint

CSS

.glass {
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
}

About this tool

Design frosted-glass (glassmorphism) CSS with live controls for blur, transparency, saturation, radius and border, previewed over a colourful backdrop.

Common use cases

Style a translucent card or navigation bar
Fine-tune backdrop blur and opacity visually
Copy cross-browser glass CSS with the -webkit- prefix