DEV Community

Cover image for CSS backdrop-filter
Suprabha
Suprabha

Posted on • Edited on

3 2

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

Top comments (0)

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️