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)

The CSS Working Group just discussed `[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`.

<details><summary>The full IRC log of that discussion</summary>
&lt;TabAtkins> noamr: This is reopening something that was resolved a while ago<br>
&lt;TabAtkins> noamr: I never quite understood the logic, even from the minutes<br>
&lt;TabAtkins> noamr: couldn't reconcile with how corner-shape works<br>
&lt;TabAtkins> noamr: to me, it doesn't amke sense, but could be missing something<br>
&lt;TabAtkins> noamr: it's about cubic reduction fo9 shadow corners<br>
&lt;TabAtkins> noamr: when there's a rounded rect, and shadow spread, there's a formula that changes the border radius<br>
&lt;TabAtkins> noamr: with a ratio of spread vs width, and a cubic term<br>
&lt;TabAtkins> noamr: i couldn't find a great reasoning for this beyond it looking better<br>
&lt;TabAtkins> noamr: i wanted to suggest that ther'es a better formula<br>
&lt;TabAtkins> noamr: looking at spread, i thought it means... it's like a 2d simplification of a 3d translate<br>
&lt;TabAtkins> noamr: like, how far the light is from the shadow<br>
&lt;TabAtkins> noamr: and changes how big the shadow will be<br>
&lt;TabAtkins> noamr: light further away, shadow spreads a certain amount<br>
&lt;TabAtkins> noamr: the expected effect i'd see is that the countour doesn't change<br>
&lt;TabAtkins> noamr: light doesn't change whether the corner is a scoop or notch or circle, etc<br>
&lt;TabAtkins> noamr: distance from a light doesn't change that shape<br>
&lt;TabAtkins> noamr: so i was thinking of implementing this as... nto compatible with cubic term. turned the spread into a non-uniform scale<br>
&lt;TabAtkins> noamr: so if it grows 4px and i have a 10x20, it would scale 2.5x and 5x in each axis<br>
&lt;TabAtkins> noamr: this just scales the contour, then<br>
&lt;TabAtkins> noamr: in corner-shape it gives a result that looks like a shadow<br>
&lt;TabAtkins> noamr: but to maintain compat, i only do that for non-round corner-shape<br>
&lt;TabAtkins> noamr: when people have a round corner it looks like the original resolution<br>
&lt;TabAtkins> noamr: people on the issue have just used something very close to a circle<br>
&lt;astearns> ack fantasai<br>
&lt;astearns> zakim, start meeting<br>
&lt;Zakim> inviting RRSAgent<br>
&lt;TabAtkins> fantasai: some constraints. a circle shoudl shadow a circle, a square shoudl shadow a square<br>
&lt;Zakim> RRSAgent, make logs Public<br>
&lt;RRSAgent> logging to https://www.w3.org/2025/08/21-css-irc<br>
&lt;Zakim> Meeting: Cascading Style Sheets (CSS) Working Group Teleconference<br>
&lt;RRSAgent> I have made the request, Zakim<br>
&lt;TabAtkins> fantasai: and third, there's continuity between the two<br>
&lt;TabAtkins> fantasai: after that it's just, what looks good<br>
&lt;fantasai> https://people.igalia.com/obrufau/testcases/shadow-radius/<br>
&lt;TabAtkins> fantasai: oriol made a pile of test cases<br>
&lt;TabAtkins> fantasai: as long as your new formula looks at least as good as what else we've tried, i'm happy to change the spec<br>
&lt;TabAtkins> fantasai: but yeah, a box with sligihtly rounded corners should continue to look like slightly rounded<br>
&lt;TabAtkins> fantasai: so my suggestion is to take the test case page, add your formula to it, and if it looks good we can resolve on it<br>
&lt;TabAtkins> astearns: you opened with "no reasoning beyond it looks good" and that is indeed why we resolve don the current<br>
&lt;TabAtkins> astearns: so applying your algo and comparing to the testcase page is probably the way to go<br>
&lt;TabAtkins> noamr: okay, that explains the reasoning<br>
&lt;TabAtkins> astearns: it took us a while to get to this, and if you ahve a better algo, i'm all for it<br>
&lt;TabAtkins> noamr: yeah, i think i do, and it also looks good with the various corner shape<br>
&lt;fantasai> scribe+<br>
&lt;fantasai> noamr: I have some good tests for weird shapes internally<br>
&lt;oriol> q+<br>
&lt;oriol> q+<br>
&lt;astearns> ack oriol<br>
&lt;fantasai> fantasai_: It's fine as long as squares are squares and circles are circles and in between is in between in a nice-looking way<br>
&lt;oriol> &lt;div style="width: 200px; height: 40px; background: cyan; border-radius: 100px / 20px; box-shadow: 0 0 0 50px blue; margin: 80px; corner-shape: superellipse(0.99999)">&lt;/div><br>
&lt;fantasai> oriol: Here's a testcase, I'm testing in Canary<br>
&lt;fantasai> oriol: I would expect the shadow and top/bottom be (?) so I don't think I understand what you are proposing<br>
&lt;fantasai> fantasai: Send a patch to Oriol so we can look at the testcases<br>
&lt;fantasai> fantasai: Then we can look into it<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7103#issuecomment-3209336942 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 07:25:07 UTC