DEV Community

Cover image for Backdrop-filters!
Ellaine Tolentino
Ellaine Tolentino

Posted on

Backdrop-filters!

Hi! This blog is just to show recent backdrop-filters I've used!
I am no expert but this is just me sharing what I've encountered in the hopes to help other newbie devs like me that might have an interest testing these effects out!

backdrop-filter:

While filter applies the effect on the entire element including its children, backdrop-filter is more specific since it only applies as a ‘background effect’ or anything behind that element.

It is limited on compatibility, so please bare with me since almost all of these would still need a workaround to apply the same effect.


There are multiple values which backdrop-filter may be:

blur()

Starting of with blur, which values can be of pixels or rem. The length value refers to the length of pixels blurring together hence, longer the length the blurry it is.
I have examples on blur application on my previous blog(Frosted glass on CSS).

blur example

Other workarounds for other browser were also discussed on stackoverflow by other fellow devs!


sepia()

backdrop-filter: sepia(90%) 

/* Can be an IE & Firefox fallback: */
/* Not exactly the same but definitely can be altered for a more similar effect*/
background: #715515; 
opacity: 0.6; 
Enter fullscreen mode Exit fullscreen mode

Sepia example

Workaround:
Sepia workaround


grayscale()

Values can be a number or percentage.

backdrop-filter: sepia(100%);
backdrop-filter: sepia(.5); /* 50% of the effect */
Enter fullscreen mode Exit fullscreen mode

grayscale


hue-rotate()

I think this is my current favorite effect. This effect changes the whole hue of the image or background color depending on the angle values!

backdrop-filter: hue-rotate(220deg); /* same effect as -140deg */
backdrop-filter: hue-rotate(.61turn); /* same effect as 220deg */
Enter fullscreen mode Exit fullscreen mode

hue-rotate


If you wanted to take a peek of each's compatibility on browsers, check out caniuse.com and browse around for any css compatibility you wanna know about.

There are more backdrop-filter effects you should try! Check out these CodePens by other creators!

Simon's CodePen

Mahdi's CodePen

Discussion (0)