v150 · CSS
Compatibility Lab
Probes browser support for image(<color>) across named colors, hex, rgb(), and oklch(). Shows before/after rendering comparing the new function to gradient-based and data-URI fallbacks, and provides a progressive-enhancement pattern.
browser support probes
before vs after — same visual outcome, less code
progressive enhancement pattern
/* 1 — Fallback: tiny data-URI or gradient (works everywhere) */
.bullet::before {
content: '';
display: inline-block;
width: 10px; height: 10px;
background: linear-gradient(#3b82f6, #3b82f6); /* solid via gradient trick */
}
/* 2 — Enhanced: CSS image() where supported */
@supports (background-image: image(red)) {
.bullet::before {
background: image(#3b82f6); /* simpler, avoids gradient overhead */
}
}
/* Why bother? image() is slightly more semantically correct — it's an <image>
value, not a degenerate gradient. Specs that accept <image> but not
<gradient> (e.g. list-style-image in older parsing contexts) work with
image() but not with the gradient workaround. */
see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗