I'd be concerned about the maintenance overhead of this ~44-lines of code vs. just 1-line of code that has a similar (while slightly less realistic) net effect:
filter: blur(16px);
I'd be concerned about the maintenance overhead of this ~44-lines of code vs. just 1-line of code that has a similar (while slightly less realistic) net effect:
filter: blur(16px);
I’m curious why. I’d have concerns about the performance of this effect, but 44 lines of CSS to achieve a higher level of polish and, dare I say, craft, doesn’t seem like something to be dismissive of at review stage.
The OP uses this same blur + a lot more effect (to make it look more realistic).
So it'd actually be the OP CSS that would perform worse than this single line.
Thanks for stating my side of this trade-off and for the nice feedback!
I have AI that can do just about everything for me, but I still need to make this tradeoff with CSS in 2025?