Help me understand the concept of multiple box shadow

I noticed a lot of websites including Google, apply multiple box shadows to cards to make it appear natural. I can’t clearly understand the concept based on what these multiple shadows are used. First: Why use multiple shadows? Can’t we do it with one?
Second: If we use multiple shadows, how they are related to each other? How to plan them?
Hoping someone can shed some light on it. Thanks.

Same as the perceived effect in real life, if there are multiple light sources in real life (which there always are), there are multiple shadows, not one shadow.

A box shadow is a way to emulate this. Obviously IRL the shadow is caused by blocking light sources, whereas box shadow gives the same effect by adding colour, same as if you drew it on a piece of paper.

It is just a block of colour that sits along the edge of an element and is easy to apply blur/softening effects to. If you need multiple blocks of colour, you need more than one. If you only use one, it won’t look as natural, that’s why muliple ones might be used. Note shadows have performance penalties, so generally the less you use, the better.

They aren’t, beyond them being built up using the same CSS attribute. The way you write them is comma seperated, and they go on top of each other, first one is at the bottom, next one is on top of that, next one is on top of that, etc.

1 Like