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


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

Top comments (8)

thisismanaswini profile image

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

ritvikdubey27 profile image
Ritvik Dubey

Thank you so much MS๐Ÿ˜‡โค๏ธ

krupapanchal2527 profile image

Very helpful.

ritvikdubey27 profile image
Ritvik Dubey

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

originalsaroj profile image
Saroj Dahal

Loved it . brother <3

ritvikdubey27 profile image
Ritvik Dubey

Glad you loved it๐Ÿ˜‡๐Ÿ˜‡โค๏ธ

ljcdev profile image

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

hasan_py profile image
Hasan โš ๏ธ

Great brother. Just Great!!