Create Stunning Image Effects with CSS Backdrop-filter

Create Stunning Image Effects with CSS Backdrop-filter

CSS backdrop-filter property

Today, we are going to learn about the CSS backdrop-filter property, which was introduced in the Filter Effects Module Level 2 specification. In particular, we will cover the backdrop-filter property’s syntax, browser support and practical applications.

Backdrop-filter Is Not the Same as Filter

You have probably already heard about CSS filters. If you need a refresher on this topic, CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS! is a great read.

While the filter property helps us apply effects like blur and sepia on a given element, the backdrop-filter property will help us apply the same effects to the area behind the element. Here is a demo to illustrate the difference (make sure you use a capable browser like Chrome with the Experimental Web Platform Features flag enabled — more on browser support in the next section):

See the Pen Filter vs Backdrop Filter by SitePoint (@SitePoint) on CodePen.

In the first case, the filter was applied to the whole image, in the second case it was just applied to the part right behind our text content. I would like to make it clear that the effect is not applied to the element’s own background but to what lies below the element. You also have to keep the element’s own background at least slightly transparent otherwise visitors won’t be able to see the intended visual effects.

Syntax and Browser Support

The backdrop-filter property shares a number of features with the filter property that you are probably already familiar with. You can apply it on any element using the following syntax:

[code language=”css”] backdrop-filter: <filter-function> [<filter-function>]* | none
[/code]

Just like the filter property, you can apply multiple filters to the element’s backdrop. All the values that are valid for the filter property are also valid for the backdrop-filter property. This property is also animatable.

Despite the many similarities between both properties, backdrop-filter does not enjoy the same wide browser support as the filter property. Right now, only Safari 9 supports this property without a flag, and even in this case you have to use the -webkit- prefix.

For Chrome and Opera, you can enable the “Experimental Web Platform Features” flag under ‘chrome://flags’. The property is not supported at all in Firefox and Edge. You can read more about browser support for backdrop-filter on Can I use.

Using Backdrop-filter

The backdrop-filter property needs at least two elements to work properly — a target element and another element right under our target, to which the effects will be applied. To create the backdrop effect in our demo above, we used the following markup:

[code language=”html”] <div class=”backdrop”>
<div class=”content”>
<h3>A Heading</h3>
<p>Some random text related to the heading.</p>
</div>
</div>
[/code]

We also used the following CSS to apply the filter on our element’s backdrop and set a background for our text content:

[code language=”css”] .backdrop {
background: url(‘path/to/image.jpg’);
}

.content {
position: relative;
top: 30%;
background: rgba(100,150,100,0.35);
backdrop-filter: hue-rotate(180deg);
}
[/code]

Another interesting use for this property is to apply different filters to different parts of the image. I am not talking about applying multiple filters simultaneously to the whole image, which, by the way is also possible. I am talking about applying, let’s say, the grayscale filter on the left part of our image and the sepia filter on the right side, or divide the image into multiple parts and apply hue-rotate on all parts with different values. One way to achieve this is by setting the opacity of our target elements to zero so that they do not interfere with the image below them that we are trying to apply the filters to.

backdrop-filter Property Example Multiple Filters Side by Side

Here is the markup that you need:

[code language=”html”] <div class=”backdrop”>
<div class=”target a”>
</div>
<div class=”target b”>
</div>
….
</div>
[/code]

And this is the CSS:

[code language=”css”] .target {
position: absolute;
top: 0%;
height: 100%;
width: 20%;
opacity: 0;
}

.a {
left: 0%;
backdrop-filter: hue-rotate(30deg);
}

.b {
left: 20%;
backdrop-filter: hue-rotate(90deg);
}

/* Filters for other sections of the image */
[/code]

This is the final result in my case:

See the Pen Multiple Side by Side Filters by SitePoint (@SitePoint) on CodePen.

How good the image finally looks will depend on your image as well as the filters you choose to apply, but if used properly this property can create some really cool effects. You should experiment with different filters to see what you can come up with yourself.

We can also animate different properties of our target elements. For example, in the following demo there are two divs at the top of our image and I have applied a different filter to each of them.

backdrop-filter Property Animating Target Properties Example

Continue reading %Create Stunning Image Effects with CSS Backdrop-filter%