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)

Apply Multiple Filter

Example:

backdrop-filter: grayscale(0.5) opacity(0.8)  // .... and more

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

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 ❤️

🌟 Twitter

📚 Ebooks

🌟 Instagram