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