What is glassmorphism?

Glassmorphism is a frosted-glass UI style that layers a semi-transparent background over a blurred backdrop, with a soft shadow and a thin highlight border to suggest a pane of glass.

Why is -webkit-backdrop-filter included?

Safari and some WebKit browsers require the -webkit- prefixed property, so it is added alongside the standard backdrop-filter for the widest support.

Does glassmorphism need a backdrop to look right?

Yes. The frosted effect comes from blurring whatever sits behind the element, so it only shows over a colourful or busy background. Over a flat solid colour there is nothing to blur and the effect is invisible.

Why might backdrop-filter not work in my browser?

Some older browsers do not support backdrop-filter, and Safari needs the -webkit- prefixed version. This generator outputs both, but on unsupported browsers the element will simply show its semi-transparent background without the blur.

Is anything uploaded?

No — the preview and CSS are generated entirely in your browser.

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. Everything runs locally in your browser — nothing is uploaded.

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