What CSS property actually creates the glass effect?

backdrop-filter: blur(...) blurs everything visible behind the element, while the semi-transparent background color lets a hint of that blurred backdrop's color through. Together they produce the frosted-glass look; neither alone is enough.

Why do I need the -webkit-backdrop-filter line too?

Safari (and older WebKit-based browsers) requires the -webkit- prefixed version of backdrop-filter to render it; this tool includes both so the effect works consistently across Chrome, Firefox, and Safari.

Why doesn't the glass effect show anything if the element has no background behind it?

backdrop-filter only blurs content actually rendered behind the element within the same stacking context — a plain solid-color page background, an image, or other elements. If there's nothing behind it, the blur has nothing to act on and the panel just looks like a flat tinted box.

Is glassmorphism accessible — does the low contrast cause issues?

It can, especially for text placed directly on the glass panel. Keep tint opacity high enough (or add a subtle extra background layer) that text meets WCAG contrast requirements against whatever busy background might be behind the panel.

Does this tool send my design anywhere?

No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.

CSS GLASSMORPHISM GENERATOR

Dial in blur, tint, and border on a live frosted-glass panel, then copy the CSS.

Glass panel

Blur: 10px

Tint opacity: 0.20

Border opacity: 0.30

Border radius: 16px

Tint color

CSS

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
}

How to build a CSS glassmorphism panel

1
Adjust the backdrop blur amount on the glass panel over the gradient background.
2
Pick a tint color and its opacity to control how much of the background shows through.
3
Dial in the border opacity and corner radius for the panel's edge.
4
Copy the generated .glass CSS and paste it into your stylesheet.

Questions

What CSS property actually creates the glass effect?: backdrop-filter: blur(...) blurs everything visible behind the element, while the semi-transparent background color lets a hint of that blurred backdrop's color through. Together they produce the frosted-glass look; neither alone is enough.
Why do I need the -webkit-backdrop-filter line too?: Safari (and older WebKit-based browsers) requires the -webkit- prefixed version of backdrop-filter to render it; this tool includes both so the effect works consistently across Chrome, Firefox, and Safari.
Why doesn't the glass effect show anything if the element has no background behind it?: backdrop-filter only blurs content actually rendered behind the element within the same stacking context — a plain solid-color page background, an image, or other elements. If there's nothing behind it, the blur has nothing to act on and the panel just looks like a flat tinted box.
Is glassmorphism accessible — does the low contrast cause issues?: It can, especially for text placed directly on the glass panel. Keep tint opacity high enough (or add a subtle extra background layer) that text meets WCAG contrast requirements against whatever busy background might be behind the panel.
Does this tool send my design anywhere?: No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.