This tutorial explores the CSS backdrop-filter property, offering practical techniques for enhancing modern user interfaces. Learn how to layer backdrop filters across multiple elements and combine them with other CSS visual effects to create sophisticated designs.

Below are a few examples of what you can achieve using the techniques described. More examples will be shown throughout the article.

The blurred, frosted glass effect is currently very popular – perhaps due to recent in-depth articles on the topic – so we'll use it as a basis for our examples. However, the principles discussed apply to any relevant filter. We'll also explore a few other filter types.

Understanding Backdrop Filters

If you're familiar with CSS filter functions like blur() and brightness(), backdrop-filter functions will be intuitive. They use the same functions. A comprehensive list of supported filter functions is available on CSS-Tricks and MDN.

The key difference between filter and backdrop-filter lies in what they affect. backdrop-filter modifies the element's backdrop, requiring a transparent or semi-transparent background for the effect to be visible. This is crucial for:

1. Achieving the desired aesthetic.
2. Layering filters across multiple elements.
3. Combining filters with other CSS effects.

Enhancing the Backdrop

While design is subjective, some guidance is helpful. If a simple blur filter on a plain background looks unsatisfactory, consider adding enhancements such as shadows, or, more commonly, enriching the backdrop itself.

Plain backdrops can be improved using filters like brightness(), contrast(), and invert(), which manipulate luminosity and hue to create visually appealing results. Textured backdrops often pair well with distorting filters like blur() and opacity().

<main><div>
  <h1>Today's Weather</h1>
    Cloudy with a chance of meatballs. Ramenstorms at 3PM lasting ten minutes.
  </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 mentioned, backdrop-filter needs a transparent or semi-transparent background to show the backdrop behind it.

When layering multiple elements with backdrop-filter, make all but the bottommost element semi-transparent (not fully transparent). The bottom element can be transparent or semi-transparent, provided it has a backdrop. Otherwise, the filter buildup won't be visible.

<main><div>
  <h1>Today's Weather</h1>
    Cloudy with a chance of meatballs. Ramenstorms at 3PM lasting ten minutes.
  <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: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    /* etc. */

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

Combining Backdrop Filters with Other CSS Effects

Elements with filter effects (from filter and background-filter) create a "backdrop root" (though not yet a standardized term). backdrop-filter works well with other effects that also use a backdrop root, as they all impact the same backdrop.

Two particularly interesting effects are mask and mix-blend-mode. backdrop-filter with mask produced the most consistent results across major browsers in our testing. Combining with mix-blend-mode can sometimes obscure the blur effect, so we won't use it in our examples, but experimentation is encouraged.

Backdrop Filter with Mask

Unlike backdrop-filter, mask affects both the background and foreground of an element. This can be leveraged to achieve specific effects.

<main><div>
    <div class="bg"></div>
    <h1>Today's Weather</h1>
      Cloudy with a chance of meatballs. Ramenstorms at 3PM lasting ten minutes.
    </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

The filter property applies effects to an element's foreground, making backdrop-filter unnecessary in those cases. However, if you need to apply a filter to a foreground element while excluding certain inner elements, backdrop-filter is a solution.

<main><div class="photo">
    <div class="filter"></div>
  </div>
</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;
  }
}

Hover over the blurred photo in the example above to see the effect.

There are many creative ways to use CSS backdrop-filter. Remember to use semi-transparent elements for layering filters, and experiment with combining them with other CSS backdrop-affecting properties. The initial UI designs shown earlier should inspire your own creations.

Further Reading

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

(Note: Replace the bracketed link placeholders with actual links to the relevant resources.)

The above is the detailed content of Using CSS backdrop-filter for UI Effects. For more information, please follow other related articles on the PHP Chinese website!