CSS Apply Filter Effects (blur, grayscale, hue) to the Area Behind an Element with backdrop-filter Property

We’re well acquainted with the CSS3 filter property that lets us apply various effects like blur, grayscale, sepia, saturation, etc. to a particular element. Now using this property we actually end up adjusting the rendering of the entire element including its borders, background and content (text or/and image). Did you ever want to apply the same effects to just the area behind the element, i.e., the background of the parent element or the one right behind/below the target element ? This is now very easily possible with the backdrop-filter property. I’m sure you’d have noticed this effect being widely used in iOS 7 and OS X Yosemite.

Exploring CSS Filters First

First, let’s just look into the different types of CSS3 filter effects. Here’s a demo:

See the Pen Visual Effects with CSS3 Filters by Rishabh (@rishabhp) on CodePen.

Now that we know what all is possible with filter, let’s try to achieve what we discussed in the intro of this article. We’ll try to create a sticky header that should basically blur the contents behind it.

See the Pen zqozpb by Rishabh (@rishabhp) on CodePen.

This demo uses filter as that’s the first thing that comes to a developer’s mind but notice how it also blurs the contents of the header. That is not what we want. We don’t want to blur the header itself but only the portion behind it, i.e., the clipped content below the header.

Introducing Backdrop Filters

The solution to this problem is the brand new CSS backdrop-filter property that accepts similar values to filter. This property applies filters to the backdrop of the element which is basically the area that you can see through the element cropped by its bounding box. This is not the background of the target element itself. So, if you modify the previous demo by replacing the filter with backdrop-filter: blur(5px), then you’ll get the desired effect. Notice the differences:

This is with filter, and here’s the one with backdrop-filter:

Notice how the backdrop is blurred in the latter image compared to how the element itself got blurred in the former version. This is exactly what we wanted. Here’s the code again:

-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);

Other Effects

Backdrop filter accepts a lot other effects, not just blur. You can pretty much use all the effects that you saw in the filter demo above, like brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia and opacity. Here’s a demo with some of them in action:

See the Pen EKNwLQ by Rishabh (@rishabhp) on CodePen.

Summary

Personally I think the addition of the backdrop-filter property to the CSS Filter Effects Module Level 2 is a great one and developers won’t have to resort to dirty hacks to implement what this simple property does. I remember having implemented this same effect by setting the background image of the target element’s parent’s ::before pseudo element same as that of the element behind (which was the parent itself). The background of .parent::before had to be then carefully positioned to make sure it overlays that of .parent perfectly pixel-wise. Finally, CSS filter had to be applied to blur the pseudo element. Now this will not work easily in our previous demo where there’s a fixed header like those in mobile apps or mobile websites. It’ll be really complicated to modify this hack for such cases where the backdrop of the target element changes on scroll or is basically dynamic.

It’s worth mentioning that the browser support for backdrop-filter is quite poor at the moment, but will definitely improve over time.

Related Posts:

• The Real Beauty of CSS3 Box Shadows
• Image Zoom Magnifying Glass Effect with CSS3 and jQuery
• Different Tools for Our Sketching Application
• Canvas Rotating and Scaling Images Around a Particular Point
• The New and Final CSS3 Linear and Radial Gradients Syntax

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter. View all posts by Rishabh