Intent to prototype and ship: CSS image(<color>) function (and use it for light-dark() images)

56 views
Skip to first unread message

Emilio Cobos Álvarez

unread,
May 8, 2026, 10:28:01 AM (9 days ago) May 8
to Mozilla
Summary: Implement the CSS image() function, restricted to its <color>
form. It produces a solid-color image with no natural dimensions and is
exactly equivalent to linear-gradient(<color>), but is more direct

As part of the same change, none inside light-dark() now computes to
image(transparent), matching the recent CSSWG resolution[1].

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=2038136
Specification: https://drafts.csswg.org/css-images-4/#image-notation
Standards Body: CSSWG.
Platform Coverage: All
Preference: enabled by default, because we're changing the behavior of
none in `light-dark()` and it'd get messy.
DevTools Bug: N/A
Extensions Bug: N/A
Use Counter: Not planned. The feature is a syntactic alias for
linear-gradient(<color>), so it's mostly useful to avoid the
light-dark(none, none) annoyance
Standards-Positions Discussion: None (trivial-ish)
Other Browsers:
- Blink: They filed the relevant issue, so presumably they'll update
https://chromium-review.googlesource.com/c/chromium/src/+/7806112.
- WebKit: No signal yet.

web-platform-tests: Coverage added as part of this work.

[1]: https://github.com/w3c/csswg-drafts/issues/13866

Thanks,
--Emilio

Nicolas Chevobbe

unread,
May 12, 2026, 3:39:09 AM (5 days ago) May 12
to dev-pl...@mozilla.org, Emilio Cobos Álvarez
There's some minor work needed for DevTools (making sure that we show the color swatch for the color parameter).
Reply all
Reply to author
Forward
0 new messages