Have you ever noticed on some websites, that the background of a page is blurred and the background of an element, be it header for example changes as you scroll?
But there is something different, it’s also blurred.
CSS filter property
Many of us already know this useful css property called filter.
Not only you can:
- alter the brightness
- increase or decrease the image’s contrast
- grayscale the image
- change the hue of the image
- invert the colors
- change the opacity
- saturate or sepia the image
- you can also blur it
But as you already know, using filter: blur() results in blurring the very content of the element, the property is used on, so how did they accomplish that effect?
CSS backdrop-filter property
As opposed to filter property, backdrop-filter lets you apply graphical effects on the elements behind the target element, isn’t that magnificat? 😍
Backdrop-filter gives you a possibility of applying that can be accomplished on the element itself, apply on the element behind it — and if you’ve seen what apple accomplished, you can not be more stunned as I was.
Do you even care bro? 😀
In front-end development world we’ve sort of got used to, that newly implemented features are firstly available on Google Chrome browsers.
However, currently by July 2020, we can enjoy using backdrop-filter on
- both, Safari ios/mac
- Google Chrome
- MS EDGE (really, not a joke!)
- and also for people born in 90s, on Opera 😂
Firefox is sadly, ignoring this marvelous CSS property 😔 .
You can really go to apple.com and check out the code via web inspector yourself, but if you really insist, I will past it here for you:
background-color: rgba(255,255,255,0.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); -webkit-transition-property: background-color, -webkit-backdrop-filter; transition-property: background-color, -webkit-backdrop-filter; transition-property: background-color, backdrop-filter; transition-property: background-color, backdrop-filter, -webkit-backdrop-filter;
Useless keywords summing up the article so I will rank higher in Google: