Backdrop filter in CSS: frosted glass that stays fast

A backdrop filter in CSS applies a graphic effect, usually blur, to whatever sits behind an element. Write backdrop-filter: blur(12px) on an element with a partly transparent background and the page beneath it softens, which is the frosted glass look used on navigation bars, sheets and cards. It is supported in every current browser. The craft lies in keeping the blurred area small, the radius modest and the fallback readable.

The basic frosted glass recipe

Three things make glass: a translucent fill so the backdrop shows, the blur itself, and a faint edge so the panel has a shape. Most people add a small saturation boost too, because blurring averages colours and leaves them greyer than you expect.

.glass {
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 16px;
}

Glass only looks like glass when there is something worth blurring behind it. On a flat grey page the panel just looks dim. Put it over a photograph or a rich gradient, as glassmorphism explains in more depth.

What backdrop-filter functions can do

The property accepts the same functions as filter, and you can chain them in one declaration. They apply in order, left to right, so blur() then saturate() behaves differently from the reverse. The full list lives on MDN.

Backdrop filter performance

Blur is one of the more expensive things a browser draws. To blur a region it has to read every pixel behind the element, sample its neighbours out to the blur radius and composite the result, and it repeats that work whenever anything behind the panel changes. A sticky header over a scrolling page redraws its blur on every frame of the scroll.

The cost scales with two numbers you control: the area of the element and the radius. A 64 pixel header blurred at 12px is cheap on almost anything. A full screen overlay blurred at 40px over a video can drop frames on a mid range phone. The broader picture is in CSS gradient performance.

Why backdrop-filter is not working

When the blur seems to do nothing, the cause is almost always one of a short list.

1. 1

   Check the background is see-through

   A solid background: #fff covers the blurred backdrop completely. Use an alpha value such as rgb(255 255 255 / 0.15).

2. 2

   Add the Safari prefix

   Safari only accepts the unprefixed property from version 18. Older iPhones still need -webkit-backdrop-filter.

3. 3

   Look for a backdrop root above it

   A parent with filter, opacity below 1, a mask, or its own backdrop filter limits what the child can see. The child then blurs only that parent, which often looks like no blur at all.

4. 4

   Watch fixed children

   Like filter, a backdrop filter makes the element the containing block for fixed and absolutely positioned children. A fixed menu inside a glass header will position itself against the header, not the window.

5. 5

   Make sure something is behind it

   Blur over a flat colour is invisible. Scroll the panel over an image to confirm it works.

A fallback that keeps text readable

Translucent panels are designed around the blur. Without it, a 14 percent white fill over a busy photo leaves text sitting on the photo itself, and contrast collapses. Write the readable version first, then upgrade it where the browser can blur.

/* Works everywhere: opaque enough to read on its own */
.glass {
  background: rgb(15 23 42 / 0.86);
  color: #f8fafc;
}

/* Upgrade where blur is available */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgb(15 23 42 / 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgb(15 23 42 / 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

Check contrast against the worst spot behind the panel, not the average. A white heading over glass that drifts across a bright sky can fall well below the ratios in colour contrast and accessibility. Darkening with brightness(0.7) usually fixes this more reliably than blurring harder.

When you don't need a blur at all

Much frosted glass exists only to make words readable over a busy background. If the background is yours to design, a calmer one solves the problem at no rendering cost. A soft, low contrast gradient behind a hero needs no panel; see website hero backgrounds and blurred backgrounds, where the blur is baked into the image once instead of computed every frame.

That second approach is how Gradiently handles legibility: a Mark knows where the words are and moves its calmest, best contrasting region behind them, so you never need a box or a blur to rescue a headline.