CSS Backdrop filter

The backdrop-filter property in CSS is used to apply filter effects (grayscale, contrast, blur, etc) to the background/backdrop of an element. The backdrop-filter has the same effect as the filter property, except the filter effects are applied only to the background and instead of to the element’s content.

Syntax:
backdrop-filter: <filter-function> [<filter-function>]* | none

`` can be any one of the following:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() – (for applying SVG filters)

You can apply multiple <filter-function/> to a backdrop.

Example:
backdrop-filter: grayscale(0.5) opacity(0.8)  // .... and more
<div class="container">
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis,
        quae distinctio magnam, laborum iusto itaque autem! Molestiae enim
        distinctio molestias, dolores ea quasi magni nisi aspernatur magnam,
        voluptate eum fuga.
      </p>
    </div>
</div>
.content {
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
Output:
css backdrop filter

Check out the full snippet here in @codepen

Browser Support 🖥

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

browser support for css backdrop filter

Reference 🧐

Thanks for reading the article ❤️

I hope you enjoy learning from the article, let me know if you have any questions on @suprabhasupi 😋