- From: 一丝 via GitHub <noreply@w3.org>
- Date: Mon, 11 May 2026 13:50:57 +0000
- To: public-css-archive@w3.org
yisibl has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-images-4]Make image(<color>) interpolatable == In CSS Images 4, the `image()` syntax [has been changed](https://github.com/w3c/csswg-drafts/commit/d2e87713989b0c8a99714ac68616890d9f8c2cc2) to `image(<color>)`, and other values have been moved to CSS Images 5. One of the main use cases for `image(<color>)` is to easily overlay a solid-color mask with alpha transparency on a background image. See also: https://stackoverflow.com/questions/9182978/semi-transparent-color-layer-over-background-image <img width="1100" height="832" alt="Image" src="https://github.com/user-attachments/assets/6a7ab73f-4eb9-4eb1-9baa-0f3a97e2bd37" /> Screenshot from: https://12daysofweb.dev/2022/css-image/#tinting-an-image by @kevin-powell Typically, a transition animation occurs on hover, making the UX feel more natural and fluid. So, I suggest allowing it to interpolate based on the `<color>` type, making it look just like a `background-color` transition. At the same time, to maintain consistency, `*-gradient(<color>)` should also support interpolation. The gradient interpolation in the specification hasn’t had time to be refined yet, so tackling solid colors first is a good place to start. > This section needs review and improvement. In particular, I believe the handling of linear-gradient() is incomplete - I think we want to specifically interpolate the "length" of the gradient line (the distance between 0% and 100%) between the starting and ending positions explicitly, so it doesn’t grow and then shrink over a single animation. > https://drafts.csswg.org/css-images-4/#issue-f1783900 ----- Given that `image(<color>)` is currently being implemented in Blink and Gecko, this is a great opportunity. - Blink: https://chromium-review.googlesource.com/c/chromium/src/+/7831826 by @CGQAQ - Gecko: https://phabricator.services.mozilla.com/D299322 by @emilio cc @tabatkins @LeaVerou @fantasai @lilles Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13913 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 11 May 2026 13:51:01 UTC