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:
Alt Text

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!

Source link

Write A Comment