v150 · CSS · demo

Gradient Fallback Playground

Pick a color and see image(<color>) as a CSS-only placeholder — for when a URL image fails, as a branded slot filler, or as a direct solid-color background with no file required.

Checking native image(<color>) support…
No fallback (broken URL shows nothing)
image-set() layer + image() fallback layer
image(<color>) direct

Common use cases

Emerald placeholder

image(#0a8f5c)

Brand blue slot

image(#0022ff)

Amber attention

image(#b87b00)

/* Direct solid-color image — no file needed */
.hero { background-image: image(royalblue); }

/* Correct: keep the color image outside image-set().
   image-set() chooses one candidate; it does not retry a color
   when the chosen URL later fails to download or decode. */
.card {
  background-image:
    image-set(
      url("photo@2x.avif") type("image/avif") 2x,
      url("photo@1x.avif") type("image/avif") 1x
    ),
    image(oklch(65% 0.15 230)); /* separate fallback layer */
}

/* Exact image() URL fallback for one image source */
.avatar {
  background-image: image("avatar.png", oklch(65% 0.15 230));
}

/* For list bullets */
.status-ok   { list-style-image: image(#0a8f5c); }
.status-warn { list-style-image: image(#b87b00); }
.status-err  { list-style-image: image(#d11a2a); }

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗