How understand interpolation about box-shadow described on MDN?

Question

Happy new year!

When I was reading the description of CSS property box-shadow, I can not figure out what Interpolation section on this page means. I googled for this but still confused. Is it about CSS animation? Could you please help? Thanks.

Please provide some code examples if possible.

Answer 1

Let me have a stab at digesting this block of nonesense

Each shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components.

Each shadow in the list is interpolated (various meanings but generally: mixed, blended) using the color, x, y, blur and spread values.

For each shadow, if both input shadows are or are not inset, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one inset and the other not inset, the entire shadow list is uninterpolable.

We can only interpolate (blend, mix whatever) the same type of shadow, be it inset or not, we cannot blend an inset shadow with a non inset shadow

If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is transparent, all lengths are 0, and whose inset (or not) matches the longer list.

I'm not sure how you would end up with a list of various lengths but from what I can garner this is saying that if we somehow end up with a list of different lengths, the browser will compensate for this by adding in transparent shadows so that it has something to interpolate (blend, mix etc) with

TL;DR

It's just explaining the steps that the browser goes through to interpolate multiple shadows and isn't related to animations from what I can see. Don't worry about it, let the browser do it's thing!