CSS image(<color>) function

concepts

1. Color Swatch Lists

   Custom list bullets using list-style-image: image(<color>) — different semantic sections get their own colored bullets without SVG files or pseudo-element tricks.

2. Gradient Fallback Playground

   Use image(<color>) as a fallback for image-set() stacks — if a higher-resolution image fails, the slot fills with a branded solid color instead of breaking.

3. content & border-image Fills

   CSS-only avatar placeholders via content: image(var(--color)) in generated pseudo-elements, plus single-edge accent borders using border-image: image(<color>) — no SVG, no data URIs.

4. Theme Builder

   Pick three colors and watch image() propagate each to a different CSS slot — the accent bar (background-image), category dot (list-style-image), and progress fill (background-image) — all at once from a single live color picker.

5. Cursor Designer

   Four hover zones each with a configurable cursor: image(<color>) 16 16, fallback — pick from an eight-color palette and choose a fallback cursor keyword (pointer, crosshair, move, grab…). The live CSS output updates instantly, showing how a single CSS line creates a custom colored cursor without any image files.

6. Authoring Studio

   Pick any color (hex, rgb(), oklch(), or a named color), choose a target property, and see image(<color>) applied live across background-image, list-style-image, border-image, and content. Resize the preview element and copy the generated CSS snippet.

7. Compatibility Lab

   Eight CSS.supports() probes (named color, hex, rgb(), oklch(), list-style-image, border-image, content, transparent), a toggle between image() output and gradient/pseudo-element fallbacks, and a @supports progressive-enhancement pattern.

why it shipped

The CSS Images spec level 4 defined image() as a richer alternative to url() — supporting fragment identifiers, directionality hints, and fallback colors. Chrome had previously implemented the URL variant but left the bare-color form unimplemented. Firefox shipped it first. The bare-color syntax is useful for generating CSS-only colored placeholders, list markers, and border-image fills that currently require either tiny image files or complex gradient workarounds. With image(), a solid color image is expressible purely in CSS.

references

• ChromeStatus entry
• MDN — image() CSS function
• CSS Images Level 4 spec — image() notation