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).
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;
Workaround:
grayscale()
Values can be a number or percentage.
backdrop-filter: sepia(100%);
backdrop-filter: sepia(.5); /* 50% of the effect */
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 */
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!
Top comments (0)