Using CSS backdrop-filter for UI Effects

This article covers tips and tricks on effectively utilizing the CSS backdrop-filter property to style contemporary user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.

Below is a hodgepodge sample of what you can build based on everything we’ll cover in this article. More examples are coming up.

The blurry, frosted glass effect is popular with developers and designers these days — maybe because Josh Comeau wrote a deep-dive about it somewhat recently — so that is what I will base my examples on. However, you can apply everything you learn here to any relevant filter. I’ll also be touching upon a few of them in my examples.

What’s essential in a backdrop filter?

If you’re familiar with CSS filter functions like blur() and brightness(), then you’re also familiar with backdrop filter functions. They’re the same. You can find a complete list of supported filter functions here at CSS-Tricks as well as over at MDN.

The difference between the CSS filter and backdrop-filter properties is the affected part of an element. Backdrop filter affects the backdrop of an element, and it requires a transparent or translucent background in the element for its effect to be visible. It’s important to remember these fundamentals when using a backdrop filter, for these reasons:

1. to decide on the aesthetics,
2. to be able to layer the filters among multiple elements, and
3. to combine filters with other CSS effects.

The backdrop

Design is subjective, but a little guidance can be helpful. If you’ve applied a blur filter to a plain background and felt the result was unsatisfactory, it could be that it needed a few embellishments, like shadows, or more often than not, it’s because the backdrop is too plain.

Plain backdrops can be enhanced with filters like brightness(), contrast(), and invert(). Such filters play with the luminosity and hue of an element’s backdrop, creating interesting designs. Textured backdrops complement distorting filters like blur() and opacity().

<main>
<div>
  <section>
    <h1>Weather today</h1>
    Cloudy with a chance of meatballs. Ramenstorms at 3PM that will last for ten minutes.
  </section>
</div>
</main>

main {
  background: center/cover url("image.jpg");
  box-shadow: 0 0 10px rgba(154 201 255 / 0.6);
  /* etc. */
  
  div {
    backdrop-filter: blur(10px);
    color: white;
    /* etc. */
  }
}

Layering elements with backdrop filters

As we just discussed, backdrop filters require an element with a transparent or translucent background so that everything behind it, with the filters applied, is visible.

If you’re applying backdrop filters on multiple elements that are layered above one another, set a translucent (not transparent) background to all elements except the bottommost one, which can be transparent or translucent, provided it has a backdrop. Otherwise, you won’t see the desired filter buildup.

<main>
<div>
  <section>
    <h1>Weather today</h1>
    Cloudy with a chance of meatballs. Ramenstorms at 3PM that will last for ten minutes.
  </section>
  <p>view details</p>
</div>
</main>

main {
  background: center/cover url("image.jpg");
  box-shadow: 0 0 10px rgba(154 201 255 / 0.6);
  /* etc. */

  div {
    background: rgb(255 255 255 / .1);
    backdrop-filter: blur(10px);
    /* etc. */

    p {
      backdrop-filter: brightness(0) contrast(10);
      /* etc. */
    }
  }
}

Combining backdrop filters with other CSS effects

When an element meets a certain criterion, it gets a backdrop root (not yet a standardized name). One criterion is when an element has a filter effect (from filter and background-filter). I believe backdrop filters can work well with other CSS effects that also use a backdrop root because they all affect the same backdrop.

Of those effects, I find two interesting: mask and mix-blend-mode. Combining backdrop-filter with mask resulted in the most reliable outcome across the major browsers in my testing. When it’s done with mix-blend-mode, the blur backdrop filter gets lost, so I won’t use it in my examples. However, I do recommend exploring mix-blend-mode with backdrop-filter.

Backdrop filter with mask

Unlike backdrop-filter, CSS mask affects the background and foreground (made of descendants) of an element. We can use that to our advantage and work around it when it’s not desired.

<main>
  <div>
    <div class="bg"></div>
    <section>
     <h1>Weather today</h1>
      Cloudy with a chance of meatballs. Ramenstorms at 3PM that will last for ten minutes. 
    </section>
  </div>
</main>

main {
  background: center/cover url("image.jpg");
  box-shadow: 0 0 10px rgba(154 201 255 / 0.6);
  /* etc. */
  
  > div {
      .bg {
        backdrop-filter: blur(10px);
        mask-image: repeating-linear-gradient(90deg, transparent, transparent 2px, white 2px, white 10px);
        /* etc. */
      }
    /* etc. */
  }
}

Backdrop filter for the foreground

We have the filter property to apply graphical effects to an element, including its foreground, so we don’t need backdrop filters for such instances. However, if you want to apply a filter to a foreground element and introduce elements within it that shouldn’t be affected by the filter, use a backdrop filter instead.

<main>
  <div class="photo">
    <div class="filter"></div>
  </div>
  <!-- etc. -->
</main>

.photo {
  background: center/cover url("photo.jpg");

  .filter {
    backdrop-filter: blur(10px) brightness(110%);
    mask-image: radial-gradient(white 5px, transparent 6px);
    mask-size: 10px 10px;
    transition: backdrop-filter .3s linear;
    /* etc.*/
  }

  &:hover .filter {
    backdrop-filter: none;
    mask-image: none;
  }
}

In the example below, hover over the blurred photo.

There are plenty of ways to play with the effects of the CSS backdrop-filter. If you want to layer the filters across stacked elements then ensure the elements on top are translucent. You can also combine the filters with other CSS standards that affect an element’s backdrop. Once again, here’s the set of UI designs I showed at the beginning of the article, that might give you some ideas on crafting your own.

References

• backdrop-filter (CSS-Tricks)
• backdrop-filter (MDN)
• Backdrop root (CSS Filter Effects Module Level 2)
• Filter functions (MDN)

Using CSS backdrop-filter for UI Effects originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Source: Read More