[crazygringo]

This doesn't make any sense to me. Shadow color should be static; shadows don't change color.

And remember that, practically, when you sum up multiple overlapping gaussians you still just get a single gaussian in the end.

So multiple "layers" of shadows seems to be entirely redundant and simply a waste of computing power.

(Unless you want 2+ shadows because you're trying to simulate the effect of 2+ directional spotlights with hard edges, but I've never seen anybody ever want to do that in a UX context. Modern UX shadows are almost universally simulating a single softbox light from slightly above.)

[erikpukinskis]

Yeah, you’re right that it doesn’t make sense if you think of the rectangle as a flat thing hovering above the background like a piece of paper.

But I think the intention is to simulate the rectangle being the top surface of a 3D box. If you shine a light at a cube on a desk, the shadows are very sharp right where the cube touches the desk, and then further away are softer.

I think that’s the effect they’re trying to achieve here?

So it’s not changing the gaussian for falloff, it’s changing the shape of the shadow, from a rectangle to a rhombus, and using different gaussians along the edges.

Here’s what it’s doing with the settings tweaked to make it more visible: https://imgur.com/a/NUXhHrn

[crazygringo]

Oh, interesting. I never thought of it that way. I think UX shadows are pretty universally meant to indicate the effect of floating cards rather than solid boxes (or "extruded").

But if you wanted a box to cast a shadow, I think you're better off rendering it in 3D software and then applying it as an image behind your element. Layering a bunch of guassians isn't going to look right either.

I would be interested if CSS ever decided to implement an "extruded" shadow option separate from the existing floating/gaussian one. I'm not sure there's much demand for it though? Not to mention I think it might be much more computationally expensive.