[jvidjejnsjcj]

To my eyes the best looking shadows on the page are the harder box-shadows, like the one labeled typical shadow at the beginning of the article. In particular the very soft shadows look indistinct and displeasing.

It might be because using a single, somewhat hard, black colored box-shadow is the most physically realistic option presented for a single distant light source. Adding more shadows of different radii at the same angle certainly does not approximate raytracing and give a more physically accurate result. In fact the lighting setup you would need to achieve that effect in real life would be very awkward, a set collinear lights of increasing size. Also, black is close to the best color to blend with for shadows, because it will lower the intensity of each color channel in roughly the same proportion. It won't give exact results unless you blend in sRGB space, but neither will any color blend, and black is probably the best approximation.

And two of his demos are very misleading. The majority of the 3D effect in the reveal demo comes from the actual 3D effect. Before sliding the slider, I couldn't judge the depths at all. And the elevation demo looks good, but I think much of the effect is from the size of the div increasing. If the purpose of the demo is to show the effect of shadow sharpness on perceived depth, it shouldn't confound it with another variable.

[spyhi]

I am surprised to find this comment so high up when so much of it is so categorically wrong I almost wonder if you're saying opposite things as a joke.

Perhaps the most egregious is your position on black shadows being the best and physically most realistic color to blend with, when in reality pure black doesn't exist in nature almost at all, it's just how our brains process things and if you actually use pure black then things will look subtly wrong--I know because I used to do that and learning to stay away from black where possible after taking a basic design course was one of the things that best improved the feel of my designs. Like, there's decades of research in the arts, sciences, and design community about this! It works for a reason.

For the sake of brevity, I'll leave this blog post here that explains it better and more in depth: https://ianstormtaylor.com/design-tip-never-use-black/

[jvidjejnsjcj]

There're two claims of fact (as opposed to just my opinion) in my comment: That layering multiple increasingly sized box-shadows in a line isn't more physically accurate than a single box-shadow, and that black is the most physically accurate color to blend with.

I'm quite confident of the first claim. You're contest of my second claim makes me think I was unclear. I don't suggest using black at 100% opacity as a shadow color. Instead, The shadow should be black with some fractional opacity, so that the background color is blended with black. The result of blending with black will not be pure black, but instead a good approximation of less intense light of the same color.

I also recognize that it's true that designers often use more saturated colors as the colors get darker, to good effect. But in the case of the shadows presented in the FA, I don't think it looks good, and whether it looks good or not, to claim it's inspired by physical realism is wrong.

[spyhi]

Fractional opacity mixing with pure black is still not the most physically accurate shadow, because in the real world ambient light is mixed in with shadow, and also the color of the object casting shadow (and the surface the shadow is cast on) also creates color casts on a second light bounce from off-angle ambient light hitting an object, which influences shadow color in a way that's not "black on top of surface color." The algorithm for blending drop shadows doesn't take these things into account. https://willkempartschool.com/the-secret-to-painting-realist...

The link above also has an example of the use of multiple shadows to create a more naturalistic feel, namely that in the real world we are accustomed to, one source of light creates multiple kinds of shadows because of reflections from clouds, objects, etc.

This is all linked to physical realism, to help carry over our expectations of what the world looks like into a (in this case) digital space.