CSS backdrop-filter

Suprabha - Jul 19 '20 - - Dev Community

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.

Content:

  1. What is backdrop-filter and its syntax?
  2. Apply multiple filter
  3. Explained with an example
  4. Browser support
  5. Reference

Syntax:

backdrop-filter: <filter-function> [<filter-function>]* | none
Enter fullscreen mode Exit fullscreen mode

<filter-function> 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 to a backdrop.

Example:

backdrop-filter: grayscale(0.5) opacity(0.8)  // .... and more
Enter fullscreen mode Exit fullscreen mode

Let's see an example that how we use backdrop-filter.

<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>
Enter fullscreen mode Exit fullscreen mode
.content {
        background-color: rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
}
Enter fullscreen mode Exit fullscreen mode

Output:

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.

Reference

MDN Backdrop filter

Thanks for reading the article ❤️

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

🌟 Twitter 👩🏻‍💻 Suprabha.me 🌟 Instagram
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player