CSS Glassmorphism Generator

This tool generates the CSS for glassmorphism — the frosted-glass UI style that layers a semi-transparent, blurred panel over a colourful backdrop. Use live controls for backdrop blur, background transparency, saturation, corner radius and tint, plus an optional highlight border, and copy the ready-made CSS. A colourful preview backdrop shows the effect exactly as it will render.

How it works

The frosted look combines a few CSS properties:

• backdrop-filter: blur() saturate() blurs and boosts the colours of whatever is behind the element — this is what creates the glass.
• A semi-transparent background (rgba built from your tint colour and transparency slider) lets the blurred backdrop show through.
• A border-radius rounds the corners, and an optional thin light border plus a soft shadow suggest a real pane of glass.

The generator also emits the -webkit-backdrop-filter prefix so Safari renders it correctly.

Example

A blue-tinted glass card at 10px blur, 180% saturation and 25% opacity produces something like:

.glass {
  background: rgba(37, 99, 235, 0.25);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

Place it over a colourful background and the area behind it blurs into a frosted panel.

Tuning the parameters

Blur amount is the most visible control. Values around 8–16px produce a recognizable frosted texture without losing the sense of what is behind the panel. Values below 4px are barely visible; values above 24px become opaque-looking and lose the glass quality. For a subtle background panel, 6–8px is a good starting point; for a prominent modal or card, 12–20px.

Background opacity determines how much tint the glass adds. At 10–20% you can see the backdrop clearly and the glass colour is subtle. At 40%+ the card reads more as a translucent solid than a pane of glass. Most glassmorphism designs sit in the 15–30% range.

Saturation boost intensifies the colours behind the glass, making them pop even through the blur. A value around 150–200% is typical; lower values produce a more muted, frosted look.

The highlight border — a 1px border using rgba(255, 255, 255, 0.3) — is optional but recommended. It mimics the specular highlight on the edge of a real glass pane and dramatically improves the illusion on darker backgrounds.

When glassmorphism works and when it does not

The effect only works when there is a visually varied backdrop behind the element. Over a solid plain background there is nothing to blur, and backdrop-filter has no visible effect — the element will simply show its semi-transparent tint colour. Use glassmorphism over gradient backgrounds, photographs, or layered UI where the backdrop contains colour and texture.

Glassmorphism can struggle with text legibility. A blurred, colourful backdrop with a semi-transparent panel often produces contrast ratios below the WCAG 4.5:1 minimum for body text. Check text contrast carefully against the range of possible backdrop colours, not just one screenshot — the backdrop shifts as the user scrolls.

The generated CSS includes the -webkit-backdrop-filter fallback for Safari. Everything runs locally in your browser — nothing is uploaded.