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