Apply Filters to Background Elements in CSS With backdrop-filter

New in the CSS filter effects module 2 is the backdrop-filter property. It allows to set filters similar to the ones we’re used to (saturation, blur, hue-rotate,…), but for elements in the background. Coupled with the fact that it’s an animatable property, it allows for some very fun UI effects.

Support for backdrop-filter is still very limited, so the example in this post may not display properly for you. For now, you can try in Safari, in Chrome with the Experimental Web Platform Features enabled or in Chrome Canary

The easiest way to understand backdrop-filter is with a concrete example. Let’s first create a fun little ice cream widget like this:

🍦 Ice Cream Please ⇣
  • 🍫 Chocolate
  • πŸ“ Straberry
  • πŸ«πŸ“ Chocolate Straberry
  • 🍍 Pineapple
  • πŸͺ Cookie dough
Background image

Here's our markup:

<div class="backdrop-example">
  <div class="foreground">
    <div class="ice-cream">
      <span>🍦 Ice Cream Please &#8675;</span>
      <ul>
        <li>🍫 Chocolate</li>
        <li>πŸ“ Straberry</li>
        <li>πŸ«πŸ“ Chocolate Straberry</li>
        <li>🍍 Pineapple</li>
        <li>πŸͺ Cookie dough</li>
      </ul>
    </div>
  </div>
  <div class="background">
    <img src="/path/to/ice-cream.jpg" width="500" height="655" alt="Ice Cream!">
  </div>
</div>

And here are our basic styles:

.backdrop-example {
  position: relative;
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}
.foreground {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  position: absolute;
}
.foreground .ice-cream {
  color: saddlebrown;
  display: inline-block;
  background: rgba(255,255,255,0.8);
  padding: .75rem 2rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  border-radius: 7px;
  cursor: pointer;

  transition: transform .15s ease-out;
}
.foreground .ice-cream:hover {
  transform: scale(1.04);
}
.foreground ul {
  max-height: 0;
  margin: 0;
  overflow-y: hidden;
}
.foreground.active ul {
  max-height: 700px;
  transition: max-height .4s ease-out;
}
.foreground li {
  padding: 0.7rem 0;
  margin: 0;
  font-size: .9rem;

  transition: background-color .2s;
}
.foreground li:hover {
  background-color: rgba(255, 255, 255, .9);
}

We use a starting max-height of 0 and then transition to a high enough max-height to toggle our ice cream flavors.

Finally, a tiny amount of JavaScript to toggle the active class

let foreground = document.querySelector('.foreground');
let trigger = document.querySelector('.ice-cream');

trigger.addEventListener('click', function() {
  foreground.classList.toggle('active');
});

Adding backdrop-filter

Now for the fun part, let’s add rules to give a slight blur and desaturate the background when the ice cream flavors are toggled open:

.foreground {
  /* ... */

  transition: backdrop-filter 1.5s ease-out;
}
.foreground.active {
  -webkit-backdrop-filter: blur(4px) saturate(20%);
  backdrop-filter: blur(4px) saturate(20%);
}

...and the final result:

🍦 Ice Cream Please ⇣
  • 🍫 Chocolate
  • πŸ“ Straberry
  • πŸ«πŸ“ Chocolate Straberry
  • 🍍 Pineapple
  • πŸͺ Cookie dough
Background image

πŸ‘‹ Thanks to ian dooley for the cool ice cream photo!


Browser Support

Can I Use css-backdrop-filter? Data on support for the css-backdrop-filter feature across the major browsers from caniuse.com.

  Tweet It
✖ Clear

πŸ•΅ Search Results

πŸ”Ž Searching...