An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Backdrop Filter effect with CSS
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.
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!
Original Link: https://dev.to/urielbitton/backdrop-filter-effect-with-css-4m2b
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To