Shadows are computationally expensive to generate. First the object has to be rendered to a buffer, and then the buffer blurred, and then the blurred buffer, object and background composited together.

Having many shadows on an object makes this path much longer. I can imagine adding this to a page could easily run out of GPU RAM and end up having to discard buffers which later need to be re-rendered.

End result:. Hot slow phone.

I'd like to at least see a benchmark of this effect before suggesting multiple box shadows.

That’s not how CSS box shadows are generated. They only need to take into account the dimensions of the rectangle and the corner radius, which opens up for a lot of optimization.

Take a look at the layer tree in the overflow menu in the chrome devtools. You can see which shadows had to be rendered to a buffer and which did not.

I suspect the complexity is that some objects can be transparent, and then their shadows get complex.

If you have an example of how transparency makes the shadow more complex, please give it. I’m fairly confident there are no cases like that. Transparency in the background image or border doesn’t change the shape of the box the shadow applies to, and things like opacity affects the shadow too. The example you had in your first comment is also wrong, as shadows don’t apply to other shadows.

There might still be cases where a particular optimization doesn’t work and the browser falls back to a buffer.

I agree that a benchmark on CPU/GPU would be helpful for this effect. However, I doubt you'd end up running out of ram through using this technique unless it was added to a large number of elements.

Makes me wish the css filter feature hadn't fizzled. Would be much more performant to do this in a single pass by giving a gradient to a box distance formula in a shader!

That will not generate a visually pleasing shadow, though.

Because? You could specify any formula you want. Including lookup tables. If you can describe it, the shader can render it.

Because a visually pleasing shadow does not follow a box distance function at all.

This is brilliant and will make design a tiny bit easier. The creator is continually producing helpful, and really cool resources to make development easier. Smashing work.

It feels like web browsers should just implement some kind of alternate blend mode that provides more color-saturated shadows

GPU/CPU battery consumption says "hi"

but yes it looks nice :-)

Would it really affect battery consumption in any meaningful way ?

probably though not massively if it's the odd site; very likely if it'a all sites. Not massively if it's the odd element in a page, very likely if it's all elements in the page. But perhaps more importantly the smoothness of the UI on scroll might be negatively impacted - and there is a lot of up and down scrolling in the mobile world, isn't there?

in other words, not everyone has an iphone 13 or other android-based extremely high-end mobile device at their disposal.

That "Hi there! Can I share a cool thing I'm working on with you?" avatar at the bottom of the page is cute! I usually hate pop-ups or chat bots. Nice! Maybe part of it is that it doesn't obscure what I'm trying to read, and it only appears at the end.

This is definitely helpful in creating various artistic designs, especially in incorporating shadows.