CSS Backdrop Filter vs Filter. Which one to use?

If you want to adjust the brightness, contrast, hue, saturation or apply blur of an element, the first property that comes in mind is filter

However, there is also a very similar property backdrop-filter which sometimes can be confusing for new developers. In this post we’ll talk about their differences.

The Differences between Filter and Backdrop-Filter

In CSS, the filter property applies visual effects to an element, such as blur or color shift. The backdrop-filter property is similar, but instead of applying the effect to the element itself, it applies the effect to the area behind the element, creating a sort of “filter” or “tint” effect on the elements behind it.

Let’s see the example, suppose we have a simple text with div container like this.

.container {
  display: flex;
}
.text {
  font-size: 300px;
  letter-spacing: 20px;
}

 You could use the filter property to blur an like this.

.container {
  filter:blur(10px);
}

 

As you can see the filter will be applied on the element content only (in this case, the text. As the container background is transparent.) Furthermore, the area of blurred can exceed beyond the container div.

Now let’s change the filter to backdrop-filter

.container {
  backdrop-filter:blur(10px);
}

The backdrop-filter property applied the filter to the “non-content” on of the container instead.  Hence the area behind the div was blurred. (Note that the backdrop-filter will have no effect if the background of the container div is not transparent) Another important difference is the blur effect from backdrop-filter will stay in the container div area unlike filter

This makes backdrop-filter very popular choice to blur the area behind the image, creating a sort of “frosted glass” effect.

To sum up, filter only apply to content of the div and can overflow the div size while backdrop-filter apply the effect to non-content and will not overflow.

If you like this post, don’t forget to check our YouTube Channel for more web development tips and tutorials 🙂