Backdrop Filter

/img/articles.jpg

The backdrop-filter property is one of the most useful new, at the time of writing, CSS properties that are landing in major browsers. It will allow you to set a custom backdrop-filter on a div. This is not to be mistaken for the CSS filter property.

The backdrop-filter property lets you apply graphical effects such as blurring or colour shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent. This introduces a new tool to progressively enhance your website or web -application. MDN has a list of all the values you can set. Today, we will take a look at one that my co-worker and CSS wizard Syb Wartna and I recently used in a project. This value is blur-filter. We made a sidebar that would reveal more information after clicking on an item. It was sort of like a modal. For the past few years, there has been one technique that everybody would use. The backdrop, or overlay, would have a slightly transparent, solid, grey colour. Let’s enhance this using the new backdrop-filter! For this example, we are going to build a simple modal. First, we’ll create the version that just displays a backdrop:


    ...

    &[data-overlay='true'] {
        &:after {
            content: '';
            z-index: 101;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba($navy, 0.4);
        }
    }

    ...

default backdropDefault backdrop Then we add one simple CSS property.


    ...

    &[data-overlay='true'] {
        &:after {
            content: '';
            z-index: 101;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba($navy, 0.4);
            backdrop-filter: blur(2px);
        }
    }

    ...

blurry backdropBlurry backdrop

And there we have it. It’s a simple way to quickly enhance the feel of your website or web-application. Just add this property below your default slightly transparent backdrop and you will offer this style as soon as it hits in the browser your user is using. Obviously, this effect is more dramatic with a less empty page. View the demo here. This demo was built with the Mirabeau boilerplate. The source code for this demo can be found at this Gist if you would like to have a look at the final working code.

Read on