Let glass see nearby color

Extend the blur layer past the header, then mask it back to size.

Josh W. Comeau@joshwcomeau.com
One of my favourite UI patterns is using `backdrop-filter` to create a “frosted glass” effect. When I see this effect in the wild, though, it’s almost never as lush and realistic as it could be. There’s an important optimization that nobody makes. ✨ I share the secret sauce in my brand-new post:
Dec 2, 2024View on Bluesky ↗
Josh W. Comeaujoshwcomeau.com
Here’s the problem: The backdrop-filter algorithm only considers the pixels that are directly behind the element.
Next-level frosted glass with backdrop-filterRead article ↗
Josh W. Comeaujoshwcomeau.com
If we want the blur to consider elements nearby, we need to extend that element so that it covers those elements. Then, using a mask, we trim the excess away, so that it’s visually the same size as we originally intended.
Next-level frosted glass with backdrop-filterRead article ↗

The filter only sees what sits behind it, so give it more to see.

1 · Header over color

Scroll either page, or drag the slider.

Blur only behindBad
backdrop-filter: blur(16px)
Extended and maskedGood
height: 200%mask-image
.header { position: sticky; top: 0; isolation: isolate; }

.header .backdrop {
  position: absolute; inset: 0 0 auto 0;
  height: 200%;                      /* sees what is below the header */
  z-index: -1; pointer-events: none;
  backdrop-filter: blur(16px);
  mask-image: linear-gradient(black 0 50%, transparent 50% 100%);
}

Why it matters, pros and cons

Why it matters

backdrop-filter only samples pixels directly behind the element, so color pops in at the edge.

Pros

  • Color glows through before it reaches the header, like real frosted glass.
  • Pure CSS: one child element and a mask, no scripts.
  • The extended layer ignores the pointer, so clicks still reach the header.

Cons

  • Blurring a taller layer costs more GPU time on weak phones.
  • One extra element per sticky header, with a mask to keep in sync.
  • Without mask support the glass spills below the header; test older browsers.