[ZephyrBlu]

It is not. Regular box shadows don't have as much depth to them because the shadow colour is static. These "smooth" box shadows create multiple layers of box shadows to give the shadow a gradient of colour from dark (Closest to object) to light (Furthest from object).

Set the opacity high, blur low and then play with the layers and you'll see the multiple box shadows. 0.5 opacity and 10 blur were the settings I used.

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

[iainmerrick]

You can get much the same effect with a single layer by setting the blur high (and maybe increasing spread-radius, which this app doesn't have a setting for).

Possibly the multi-layer version is better -- I'd like to see a proper comparison -- but is it better enough to justify the cost?

[planede]

It feels that this merely emulates motion blur in the direction of the shadow. Is layering the only way to go about this?