[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.