DEV Community

Cover image for backdrop-filter in CSS
Ritvik Dubey
Ritvik Dubey

Posted on • Updated on

backdrop-filter in CSS

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

Top comments (7)

Collapse
 
thisismanaswini profile image
Manaswini

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

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

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

Collapse
 
krupapanchal2527 profile image
KrupaPanchal2527

Very helpful.

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

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

Collapse
 
ljcdev profile image
ljc-dev

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

Collapse
 
isarojdahal profile image
Saroj Dahal

Loved it . brother <3

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

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