v150 · CSS · demo

Color Swatch Lists

Different list sections get different colored bullets using list-style-image: image(<color>) — a solid-color square generated directly in CSS. No SVG files, no pseudo-elements, no background-color hacks.

Live preview — change the color picker to see image(<color>) update instantly:

Semantic categories

✅ Shipped

  • CSS Gap Decorations
  • Programmatic Scroll Promises
  • Focusgroup attribute

🔵 In progress

  • CSS image(<color>) function
  • flex-wrap: balance
  • Media pseudo-classes

🔴 Known issues

  • list-style-image sizing quirks
  • Fallback image order

image(<color>) variant

List with image(#0a8f5c) bullets

  • CSS Gap Decorations
  • Scroll Promises
  • Focusgroup

List with image(#0022ff) bullets

  • image() function
  • flex-wrap: balance
  • Media pseudo-classes

List with image(#d11a2a) bullets

  • Sizing quirks
  • Fallback order
/* Chrome 150 — solid color as a list-style-image */
.success-list {
  list-style-image: image(#0a8f5c);
}

.warning-list {
  list-style-image: image(oklch(65% 0.18 30));
}

.error-list {
  list-style-image: image(#d11a2a);
}

/* Also works for background-image, border-image, content: */
.badge::before {
  content: image(royalblue);
  /* renders as a solid blue rectangle inline */
}

see also

implementation reference

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