This has like 10 stacked effects, thats about 7 too many except for the most demanding aesthetics.

Just use the background color + blur + box shadow or border

For folks who wanted a less intensive glass effect, they could pick and choose from the tutorial. You get a pretty respectable piece of glass at step three with just blur and shadow. I'd personally recommend doing that and mixing in a static light ray image. IDT most applications would need the full JavaScript effect. It's fun but it can be distracting.

With blur, shadow, and light rays alone you can already get _really close_ to that Forza image at the top.

Interesting that most of the top comments are talking about wastefulness.

I think that's part of why everyone went to flat design - Windows Vista and glass effects looked great, but they were expensive to compute! Flat designs are aesthetically controversial, and can be more difficult to use than skeuomorphic ones, especially for older users [0][1].

Considering that realism can aid in usability, I think it's totally valid to use effects like this on the web.

[0]: https://www.tandfonline.com/doi/abs/10.1080/0144929X.2020.18...

[1]: https://www.sciencedirect.com/science/article/abs/pii/S01419...

What is the reason for the limit of stacked effects being n <= 3? Is it an accessibility issue, performance issue, maintenance issues, or what?

CSS is by far my weakest skill in terms of development, so I am completely unaware of the best/worst practices.

Did you miss the bit where the author explains that he is going for the most demanding aesthetics?