Create OS-style backgrounds with backdrop-filter
Blurring and color shifting behind an element.
Translucence, blurring, and other effects are useful ways of creating depth while keeping the context of the background content. They support a host of use cases such as frosted glass, video overlays, translucent navigation headers, inappropriate image censoring, image loading, and so on. You may recognize these effects from two popular operating systems: Windows 10 and iOS.
Historically, these techniques were difficult to implement on the web, requiring less than perfect hacks or workarounds. In recent years both Safari and Edge have provided these capabilities through the background-filter (and alternatively, the -webkit-backdrop-filter) property, which dynamically blends foreground and background colors based on filter functions. Now Chrome supports background-filter, starting in version 76.backdrop-filter. Try the example on CodePen.
Browser support #
- Chrome 76, Supported 76
- Firefox 103, Supported 103
- Edge 17, Supported 17
- Safari 9, Supported 9
For performance reasons, fall back to an image instead of a polyfill when backdrop-filter isn't supported. The example below shows this.
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}
## Basics
- The `backdrop-filter` property applies one or more filters to an element, changing the appearance of anything behind the element.
- The overlaying element must be at least partially transparent.
- The overlaying element will get a new stacking context.
<aside class="aside flow bg-state-bad-bg color-state-bad-text"><p class="cluster color-state-bad-text"><span class="aside__icon box-block "><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Error sign"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-2h2v2h-2zm0-10v6h2V7h-2z" /> </svg></span><strong>Caution</strong></p><div class=" flow"> <code>backdrop-filter</code> may harm performance. Test it before deploying. </div></aside>
CSS `backdrop-filter` applies one or more effects to an element that is translucent or transparent. To understand that, consider the images below.
<div class="switcher">
<figure class="compare flow" data-type="worse" data-size="full"><p class="compare__label">No foreground transparency</p>
<img alt="A triangle superimposed on a circle. The circle can't be seen through the triangle." decoding="async" height="283" loading="lazy" sizes="(min-width: 480px) 480px, calc(100vw - 48px)" src="https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format" srcset="https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format&w=200 200w, https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format&w=228 228w, https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format&w=260 260w, https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format&w=296 296w, https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format&w=338 338w, https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format&w=385 385w, https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format&w=439 439w, https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format&w=500 500w, https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format&w=571 571w, https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format&w=650 650w, https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format&w=741 741w, https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format&w=845 845w, https://web-dev.imgix.net/image/admin/LOqxvB3qqVkbZBmxMmKS.png?auto=format&w=960 960w" width="480" />
```css
.frosty-glass-pane {
backdrop-filter: blur(2px);
}Foreground transparency
.frosty-glass-pane {
opacity: .9;
backdrop-filter: blur(2px);
}The image on the left shows how overlapping elements would be rendered if backdrop-filter were not used or supported. The image on the right applies a blurring effect using backdrop-filter. Notice that it uses opacity in addition to backdrop-filter. Without opacity, there would be nothing to apply blurring to. It almost goes without saying that if opacity is set to 1 (fully opaque) there will be no effect on the background.
The backdrop-filter property is like CSS filters in that all your favorite filter functions are supported: blur(), brightness(), contrast(), opacity(), drop-shadow(), and so on. It also supports the url() function if you want to use an external image as the filter, as well as the keywords none, inherit, initial, and unset. There are explanations for all of this on MDN, including descriptions of syntax, filters, and values.
When backdrop-filter is set to anything other than none, the browser creates a new stacking context. A containing block may also be created, but only if the element has absolute and fixed position descendants.
You can combine filters for rich and clever effects, or use just one filter for more subtle or precise effects. You can even combine them with SVG filters.
Examples #
Design techniques and styles previously reserved for operating systems are now performant and achievable with a single CSS declaration. Let's look at some examples.
Single filter #
In the following example, the frosted effect is achieved by combining color and blur. The blur is supplied by backdrop-filter, while the color comes from the element's semi-transparent background color.
.blur-behind-me {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(.5rem);
}Multiple filters #
Sometimes you'll need multiple filters to achieve the desired effect. To do this, provide a list of filters separated by a space. For example:
.brighten-saturate-and-blur-behind-me {
backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}In the following example, each of the four panes has a different combination of backdrop filters while the same set of shapes are animated behind them.
Overlays #
This example shows how to blur a semi-transparent background to make text readable while stylistically blending with a page's background.
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}Text contrast on dynamic backgrounds #
As stated earlier, backdrop-filter allows performant effects that would be difficult or impossible on the web. An example of this is changing a background in response to an animation. In this example, backdrop-filter maintains the high contrast between the text and its background in spite of what's going on behind the text. It starts with the default background color darkslategray and uses backdrop-filter to invert the colors after the transformation.
.container::before {
z-index: 1;
background-color: darkslategray;
filter: invert(1);
}
.container::after {
backdrop-filter: invert(1);
z-index: 3;
}Conclusion #
More than 560 of you have upvoted the Chromium bug over the past few years, clearly marking this as a long awaited CSS feature. Chrome's release of backdrop-filter in version 76 brings the web a step closer to truly OS-like UI presentation.