backdrop-filter in CSS

#beginners #discuss #webdev #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>

#div-1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#div-2 {
  width: 60vw;
  height: 40vh;
  position: absolute;
  backdrop-filter: blur(15px); 
}

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

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.