Re: [csswg-drafts] [css-borders-4] Allow to define individual blur radii for the different sides of box shadows (#9125)

I'd say, a starting point would be using [different x and y spreads in the Gaussian function](https://en.wikipedia.org/wiki/Gaussian_function#Two-dimensional_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

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9125#issuecomment-1688928724 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 22 August 2023 21:02:43 UTC