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

[SebastianZ]

There were different requests for defining different blur radii for the four sides of box shadows in the past.

This would allow to create smear effects, for example, by defining 0 for one direction and a non-zero value for the other direction. And it would also allow to create a wider variety of drop shadows imitating light coming from a specific angle or even point lights, especially in conjunction with individual spread radii.

Sebastian

[LeaVerou]

How would this be rendered? Right now shadows are generated by creating a rectangle of suitable color, size, and position and applying gaussian blur to it. What would this be applying?

[SebastianZ]

I'd say, a starting point would be using different x and y spreads in the Gaussian function.

This would already allow to create smear effects. See e.g. https://www.imgonline.com.ua/eng/blur-linear.php for how this effect is applied to images.

To allow different blur radii for all four sides, one approach could be to transition between the different values when applying it to the colored rectangle. Doing so, the blur radius changes gradually from one side to the other.
Having said that, I have to admit that I am not enough into the maths behind that that I could create a mockup of that.

The effect of that would be a more natural shadow. Imagine a 3D scene where there's a point light placed above the box and you're looking at it from the top.
Here's a rough example how that might look like: https://jsfiddle.net/SebastianZ/yrhvsae4/

Sebastian

[tabatkins]

In practice blurs are accomplished with a triple box blur of an appropriate kernel size (about 1/3 of the spread radius, I think?), because this is a very cheap and reasonable approximation of a gaussian blur.

We could do different x and y blurs by just adjusting the kernel size appropriately, I suppose. But adjusting the blur across a single axis would require a totally different approach. If the only use-case is "get slightly better at approximating a physical light source", I'm not sure it would be worthwhile; the shadow still won't be physically accurate.

[SebastianZ]

In practice blurs are accomplished with a triple box blur of an appropriate kernel size (about 1/3 of the spread radius, I think?), because this is a very cheap and reasonable approximation of a gaussian blur.

Thanks for the insights!

We could do different x and y blurs by just adjusting the kernel size appropriately, I suppose. But adjusting the blur across a single axis would require a totally different approach. If the only use-case is "get slightly better at approximating a physical light source", I'm not sure it would be worthwhile; the shadow still won't be physically accurate.

The main use case are the aforementioned smear effects by providing two different radii for the horizontal and vertical axis. Example:

And the goal of allowing four different radii is rather to approximate point light shadows.
Physically accurate ones are out of scope of this proposal (but are an interesting idea).

Sebastian

[SebastianZ]

I realized the example from my last comment can be faked using a filter and scaling it. So here's a live sample for the above: https://codepen.io/SebastianZ1983/pen/zYydvwX

Sebastian