Be aware that rendering-heavy properties like filter are not too good for performance when you have a lot of images out there.
Yes, coding is all about trade offs. So it all depends on use cases ☺
You have to admire the hidden power though. SVG filters are a science into themselves and can be used with this CSS property.
Anyway do you know of any benchmarks?
Don't have any data to show you, just words from experience and checking this stuff on private projects.
What I've found is that CSS filters performance drops are most visible when you're using them in animations. It can really screw up the UX. And when using it just for initial display - on high-end PC-s you might not even see the difference, but it's certainly noticeable on mobile devices.
I have some data and its really not that bad!
Thank you ever so much Una :D
Agreed, definitely do not use too many advanced CSS attributes like this: codepen.io/ivorjetski/pen/dBYWWZ
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.