CSS backdrop-filter

CSS backdrop-filter


1 min read

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.


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


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


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

Buy Me A Coffee

🌟 Twitter πŸ“š Ebooks 🌟 Instagram