Beyond The Blur: A Quick Guide to the CSS Backdrop-Filter Property

Back in 2019 I spotted a post from a Mozilla social media account announcing that backdrop-filter was implemented behind a flag in their Firefox Nightly build. I quickly threw together a rough demo and then a basic playground to explore what was possible.

Time passed and this last 6 months or so, with broader browser support and real-world usage in client projects, I've finally updated that playground to remove jQuery and modernise the code.

This quick article documents what backdrop-filter is, how it works, and how to use it effectively.

What is backdrop-filter?

The backdrop-filter CSS property applies graphical effects such as blurring or colour shifting to the area behind an element. Unlike the standard filter property which affects the element itself, backdrop-filter only impacts what's behind it.

For the effect to be visible the element tends to need some kind of semi-transparent background, but this constraint could actually be useful as it can aid and enforce intentional design decisions rather than letting blur become a "visual band-aid".

It could be particularly useful for creating "glassmorphism" effects - translucent overlays that slightly blur the content beneath (if you really, really felt the need).

.frosted-glass {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

Why backdrop-filter is useful

backdrop-filter opens up design possibilities that would otherwise require heavier workarounds or compromises. Instead of choosing between obscuring content completely or losing visual focus, filters like blur create visual depth and separation with minimal overhead. Overlays and modals can maintain context—the visitor sees the page beneath and intuitively understands they're in a temporary state.

Backdrop-filter options

The backdrop-filter property accepts the same filter functions as the standard filter property.

Here are the main options:

blur()

Applies a Gaussian blur to the backdrop. The value defines the blur radius in pixels.

backdrop-filter: blur(5px);

brightness()

Adjusts brightness. Values below 100% darken, above 100% brighten. Useful for softening bright backgrounds behind text.

backdrop-filter: brightness(150%);

contrast()

Adjusts the contrast. Below 100% reduces it, above 100% increases it.

backdrop-filter: contrast(200%);

grayscale()

Converts the background to greyscale. 100% removes all colour.

backdrop-filter: grayscale(50%);

hue-rotate()

Rotates hues around the colour wheel. Values are set in degrees (deg).

backdrop-filter: hue-rotate(180deg);

invert()

Inverts colours completely. 100% is full inversion.

backdrop-filter: invert(75%);

opacity()

Adjusts opacity of the backdrop. Lower = more transparent.

backdrop-filter: opacity(50%);

saturate()

Adjusts colour saturation. Above 100% increases it, below decreases.

backdrop-filter: saturate(200%);

sepia()

Applies a sepia tone. 100% is full sepia.

backdrop-filter: sepia(90%);

Combining multiple filters

You can stack multiple effects in a single backdrop-filter rule. Blur paired with brightness feels natural:

.glass-overlay {
  backdrop-filter: blur(10px) brightness(120%);
}

But here's the catch: the order you list them in actually changes the result. Filters are applied sequentially, left to right, and each one operates on the output of the previous filter. When color-based filters interact (brightness, contrast, hue-rotate, saturate), the difference becomes visually obvious.

Filter application order

Compare these two—same filters, different order:

Brightness first, then contrast:

backdrop-filter: brightness(50%) contrast(150%);

Contrast first, then brightness:

backdrop-filter: contrast(150%) brightness(50%);

The first one darkens the backdrop, then applies extreme contrast to those darker values. The second applies contrast to the original colors first, then darkens the result. Blur and spatial effects are less sensitive to order, but always test your combinations to ensure they match your intent.

Browser support

Backdrop-filter is well supported across modern browsers. Chrome, Edge, Safari, and Firefox all support it.

The vast majority of filter functions work consistently: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), and saturate() are all broadly compatible. Where things get tricky is the newer or more experimental filters that some browsers haven't fully implemented yet.

opacity() and drop-shadow() are the two filters that seem to, currently, have some significant limitations. As of this writing, opacity() only has reliable support in Firefox Nightly; it's ignored in Chrome, Edge, and Safari. Similarly, drop-shadow() currently only works in Firefox Nightly and looks to be unsupported elsewhere. If you need these effects, they're safe to use as progressively enhanced features, but don't rely on them as core functionality.

For robust support for colour and blur-based effects, stick with the filters that have universal adoption: blur() paired with brightness(), contrast(), or grayscale() gives you everything you need for glassmorphism effects without compatibility worry.

Wrapping up

Backdrop-filter is a pretty straightforward property. Pair it with a semi-transparent background, pick your filter(s) (blur is most useful), and test on real devices. The main trick is remembering that transparency is generally required for the effect to show.

Try it yourself

Play with all backdrop-filter options live in this CodePen—adjust blur, brightness, contrast, saturation, and more to see how they combine:

• CSS
• Backdrop-filter
• Accessibility
• Design