Re: [csswg-drafts] [css-backgrounds-3][css-borders-4] The shape of box-shadow should be a circle for a box with border-radius:50% and big spread (#7103)

Having looked at this again, I think my proposal is identical to "percentage of same axis" in Oriol's demo, and I think that's the one we should have adopted and should switch to.

Some reasoning for this:

Shadow spread is *weird*. In most casest doesn't really represent the effect of a distant light source. However, it *kind of* does when the element's box is a square or close to that. The current spec, as the title of this OP mentions, breaks this relationship between spread and light distance when the element is square - the one thing spread *kind of* does well.

In addition, there is no way to generalize the current spec in a way that looks good for corner-shape and border-shape. The only plausible generalization is "percentage of the same axis" as at least it keeps the exact contours when the box is near square.

In a way, the current spec with the ^3 thing tries to look a bit like a stroke but doesn't go all the way. It looks a bit better for some of the stretched use cases because of that "strokyness".

Let's take a few examples from the demo:

current spec:

<img width="1200" height="1644" alt="Image" src="https://github.com/user-attachments/assets/cbf6c60d-1f6c-4f17-bb16-0d0de0ae7ba2" />

percentage of same axis:

<img width="1246" height="1640" alt="Image" src="https://github.com/user-attachments/assets/9e82fac7-96af-425b-9ba5-7d887f24b886" />

Looking at these:
- examples (1), (2) and (3) look better (or at least more like a shadow) with "percentage of same axis".  (1) in current-spec doesn't look anything remotely like a shadow effect.
- example (4) and (5) looks like an imperfect stroke/outline for "current" spec, which is perhaps what makes them seem "better". The "percentage of same axis" version looks more like a "spread" shadow than a stroke. You can imagine a rectangular light source that would sort-of create those, and with an offset they would look a bit more like a legit shadow.

To summarize:
- We should prioritize how spread looks in a square because the concept of shadow "spread" is weird to begin with when the box is stretched and there is no perfect mapping that fits all the use cases.
- To make the "shadow from a distant light source" look better with the stretched use cases we can introduce an actual light-distance primitive (a 3d translate?) that supercedes shadow offset/spread. It would both animate better and would look more correct but is perhaps a bit less "easy". For spread, since it's an oversimplification to begin, we should keep a simple model that also aligns with corner-shape and border-shape and at least keeps *some* relationship to the concept of physical shadow.


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


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

Received on Thursday, 21 August 2025 17:37:37 UTC