DEV Community

loading...
Cover image for backdrop-filter in CSS

backdrop-filter in CSS

ritvikdubey27 profile image Ritvik Dubey ・Updated on ・2 min read

This article is about backdrop-filter property in CSS. This will be a short article.

Let's start

The CSS backdrop-filter property is used to apply effects on the area behind an element. In simple words its effect can be seen on the element in the background of the element where this property is applied.

This let's you apply graphical effects. This is unlike the filter property where it applies the effect to the whole element.

While using this the overlaying element must be at least partially transparent so that you can see the effect.(The pro tip:- don't give that div any color)
The overlaying element will get a new sticky context.

Let's break it more to make it even simple,

Let's suppose there is a div name it div-1, which have an image, now there is another div name it div-2, inside div-1 and which is overlaying the div-1. Now apply the filters on the div-2 using backdrop-filter property, so the effect of filters will be on the div-1.

<div id="container">
  <div id="div-1">
    <div id="div-2"></div>
      <img src="https://images.pexels.com/photos/1295959/pexels-photo-1295959.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode
#div-1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#div-2 {
  width: 60vw;
  height: 40vh;
  position: absolute;
  backdrop-filter: blur(15px); 
}
Enter fullscreen mode Exit fullscreen mode

In this example I have applied blur() filter. It's effect you can see clearly in the pen below.

There are number of filters which you can apply using backdrop-filter property. They are as follows:-

  • backdrop-filter: none;
  • backdrop-filter: blur();
  • backdrop-filter: brightness();
  • backdrop-filter: contrast();
  • backdrop-filter: drop-shadow();
  • backdrop-filter: grayscale();
  • backdrop-filter: hue-rotate();
  • backdrop-filter: invert();
  • backdrop-filter: opacity();
  • backdrop-filter: sepia();
  • backdrop-filter: saturate();

To read more about filters Click here

In the example below I have applied some of these filters

NOTE:-

This doesn't works on Firefox or Internet Explorer.

Cover:- Rajat Gour

Thank you for reading.

Please feel free to share your views about it.

I hope you liked it and found it helpful.

Connect with me on Twitter or LinkedIn

My personal blog blog.ritvikdubey.com

Discussion

pic
Editor guide
Collapse
thisismanaswini profile image
Manaswini

This was like a good revision!! Good one Ritvik πŸ‘Œ

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you so much MSπŸ˜‡β€οΈ

Collapse
krupapanchal2527 profile image
KrupaPanchal2527

Very helpful.

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

I'm glad you found it helpful.!πŸ˜‡

Collapse
originalsaroj profile image
Saroj Dahal

Loved it . brother <3

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Glad you loved itπŸ˜‡πŸ˜‡β€οΈ

Collapse
ljcdev profile image
ljc-dev

Nice article 😁!! A shame it doesn't work on firefox yet. But good to know πŸ‘Œ.

Collapse
hasan_py profile image
Hasan ⚠️

Great brother. Just Great!!