Yesterday i came upon a really cool looking effect on a website and tried to reproduce the effect for a new web app i was developing. It had a transparent container create a filter backdrop on the background image behind it and it was really neat.
Here’s the effect:
I tried the usual css property filter: blur(10px) but that only blurred the container itself and not the background behind the element. After some research i found a super simple one line css property to do just that. Since then i’ve been using it in every app or design i created (where appropriate).
here it is:
.container {
backdrop-filter: blur(10px);
}
I had no idea that CSS property existed!
Now add a background image behind your container and watch the magic. Pretty cool right?
Note: Some browsers may not support the property. But the major ones like chrome, firefox and edge do.
Try it out and let me know what you think. Till next time!
#link #backdrop-filter #css