Do I still need -webkit-backdrop-filter?

MDN lists backdrop-filter as Baseline 2024, so current browsers support the unprefixed property, but Safari has needed the -webkit- prefix, so older Safari versions still do. The generator writes both, which costs nothing.

Is glassmorphism accessible?

It can be, but text over a blurred, changing background is the risky part. Keep the panel opaque enough that the text passes 4.5 to 1 against every colour that can appear behind it, and offer a solid version for people who ask for less transparency. The contrast check in the tool is a first test, not the last one.

Does it hurt performance?

It can. The browser blurs what is behind the panel whenever that changes, so large panels, many panels and panels over video or animation are the expensive cases. Keep glass to a few small surfaces.

What is prefers-reduced-transparency?

A media feature that lets people ask their system for less transparency. The generator can add a rule that gives them a nearly solid panel with no blur. Browsers that do not know the feature simply ignore the rule.

Glassmorphism CSS generator

Make a frosted-glass panel with backdrop-filter, copy the CSS with the Safari prefix and a fallback, and check that your text stays readable over the background.

Free · Runs in your browser · Updated 26 September 2026

Glass

Blur

Saturation

100% leaves colours as they are.

Panel colour

Panel opacity

Border opacity

Corner radius

Class name

Include

Soft shadowFallback for browsers without backdrop-filterA nearly solid panel, so the text stays readable.Solid panel for people who ask for less transparencyA prefers-reduced-transparency rule.

Check the text

Text colour

Background, left

Background, right

Over the left background: Passes WCAG AA: 5.6 to 1
Over the right background: Fails WCAG AA: 3.8 to 1

Normal text needs 4.5 to 1. This blends the panel over each background colour, which is close but not exact once blur and saturation change the colours. Test the real page.

Preview and CSS

Frosted glass

The shapes behind this panel are blurred. Check that this text is still easy to read.

CSS

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

/* Browsers without backdrop-filter get a nearly solid panel, so the text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* People who ask their system for less transparency get a solid panel. */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

backdrop-filter only blurs what is behind the element up to the nearest parent that has opacity below 1, a filter or a blend mode. If the blur does nothing, look at the parents.

The recipe

Four properties make the glass.

background with low opacity, so the colours behind show through.
backdrop-filter: blur(…) to blur what is behind the panel. A little saturate() keeps the blurred colours from looking washed out.
A thin, translucent border to catch the light along the edge.
An optional soft box-shadow to lift the panel off the page.

The blur is what makes it look like glass, and it only shows when there is something behind the panel to blur: an image, a gradient or shapes. On a flat colour the panel simply looks like a tinted box.

Readability

Check the text, then check it on the real page.

The contrast figures blend your panel colour over each of the two background colours and measure the text against the result, using WCAG’s 4.5 to 1 for normal text. Blur and saturation change the colours a little, and a real background has many colours, so treat a pass as a good sign and a fail as a firm warning.

The fallback makes the panel nearly solid in browsers that cannot blur, so text does not end up on an unblurred busy background.
The reduced-transparency rule gives people who ask for less transparency a solid panel with no blur.
If the blur does nothing, look at the panel’s parents for opacity, a filter or a blend mode.

FAQ

Questions people ask first.

Why is my backdrop-filter blur not working?: The element’s own background must be see-through, and the blur only reaches back as far as the nearest parent that has opacity below 1, a filter or a blend mode. If a parent has any of those, the blur has nothing behind it to blur. Check the parents first.
Do I still need -webkit-backdrop-filter?: MDN lists backdrop-filter as Baseline 2024, so current browsers support the unprefixed property, but Safari has needed the -webkit- prefix, so older Safari versions still do. The generator writes both, which costs nothing.
Is glassmorphism accessible?: It can be, but text over a blurred, changing background is the risky part. Keep the panel opaque enough that the text passes 4.5 to 1 against every colour that can appear behind it, and offer a solid version for people who ask for less transparency. The contrast check in the tool is a first test, not the last one.
Does it hurt performance?: It can. The browser blurs what is behind the panel whenever that changes, so large panels, many panels and panels over video or animation are the expensive cases. Keep glass to a few small surfaces.
What is prefers-reduced-transparency?: A media feature that lets people ask their system for less transparency. The generator can add a rule that gives them a nearly solid panel with no blur. Browsers that do not know the feature simply ignore the rule.

More free tools.

All 15 tools

From the team behind the tools

Building a product?

Daniotech builds web, mobile and real-time software for startups and teams. Tell us what you are making and who it is for.

Send requirements See our services