[css-borders-4] Allow to define individual spread radii for the different sides of box shadows

[SebastianZ]

@LeaVerou mentioned many years ago that it would be handy to have the ability to set individual values for horizontal and vertical spread radii on box shadows.

This would allow to create different shadow effects like only extending them on one side. Or, in conjunction with individual blur radii, they may create smear effects.

Sebastian

[Loirooriol]

So it I set the left spread to 10px, and the right spread to 90px, would it basically be like setting an horizontal spread of 50px, but with an offset of 40px?

[SebastianZ]

@Loirooriol Wow, by reading your comment I just realized that I mixed up spread and blur radius. I was obviously to tired to think clearly.😊
I've now added a separate issue to allow to define different blur radii as well.

Both actually have their use cases. So I've change my initial comment to cover the spread radii instead of the blur radii.

And yes, for the spread radius it may be more reasonable to only allow horizontal and vertical values because the rest can be achieved using the offset.

Sebastian

[Loirooriol]

Being able to specify a different spread per axis would allow creating similar shapes, e.g.

width: 200px;
height: 50px;
margin: 50px;
border-radius: 50%;
background: cyan;
box-shadow: 0 0 0px 50px magenta;

looks like:

With box-shadow-spread: 12.5px 50px, both the element and its shadow would have an aspect ratio of 4 / 1:

Though arguably this would be better addressed with box-shadow-spread: 25%.