Published By Joshua Sandoval

Twitter Facebook iOS Blur Effects in CSS

Blur Tool icon

This article is all about the proper use of the CSS backdrop-filter property, which can be used to create some of the coolest graphical effects of all CSS history so far…

It works exactly the same as the regular CSS filter property, the only thing that's different is that it effects the backdrop (eg. what's behind the background) instead of the entire element itself. Unfortunately, at the time of writing, it cannot be animated, but the regular filter is… so you'll have to be clever.

This will probably be your most used-case for the property:

.module { background-color: #FFFFFF; }
@supports ( ( -webkit-backdrop-filter: blur(20px) ) or ( backdrop-filter: blur(20px) )) { .module { background-color: rgba(255,255,255,0.8); -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%); } }

Now, if you're observant you probably noticed that I used the @supports rule in conjunction with the backdrop-filter property… the reason for that is that you're going to want a fallback with a solid background.

Anyway, that's about it for your casual use… here are the rest of the potential values of the CSS backdrop-filter property. They're pretty self-explanatory, so I won't bother going into any little detail anyway.

Default/Keyword Value

backdrop-filter: none;

Blur Function

backdrop-filter: blur( <length> );

Saturate Function

backdrop-filter: saturate( [ <number> | <percentage> ] );

Brightness Function

backdrop-filter: brightness( [ <number> | <percentage> ] );

Contrast Function

backdrop-filter: contrast( [ <number> | <percentage> ] );

Drop-Shadow Function

backdrop-filter: drop-shadow( <length>{2,3} <color>? );

Now, to be honest, I have no idea how one this one applies to the backdrop… might be entertaining to experiment with!

Grayscale Function

backdrop-filter: grayscale( [ <number> | <percentage> ] );

Hue-Rotate Function

backdrop-filter: hue-rotate( <angle> );

Invert Function

backdrop-filter: invert( [ <number> | <percentage> ] );

Opacity Function

backdrop-filter: opacity( [ <number> | <percentage> ] );

Sepia Function

backdrop-filter: sepia( [ <number> | <percentage> ] );

Anyway, that's really about it… here is a live compatibility table along with another source on the documentation of this property. Mozilla Docs.

Can I Use css-backdrop-filter? Something went wrong… JavaScript not enabled?