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.

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

<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

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>

.content {
        background-color: rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
}

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 😋