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:
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
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
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);
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.
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.
2 thoughts on “CSS Apply Filter Effects (blur, grayscale, hue) to the Area Behind an Element with backdrop-filter Property”
This is a pretty cool effect. I hope it gains widespread support via Chrome, Firefox, and non-Safari mobile browsers
Worked great for me. I’m using it with WebKit on iOS and Android devices.