v150 · CSS · demo

Theme Builder

Pick an accent color and watch it propagate via image() to three distinct CSS targets simultaneously: the top bar (background-image), the category dot (list-style-image), and the progress fill (background-image). One color value, three different image slots — all pure CSS.

Chrome 150+ — image() with a bare color value. In older browsers the colored elements use fallback inline styles.

Pick a color for each role · watch the card update live · see the generated CSS below

Design system
Component Library v3.0
New token architecture with semantic layers. Supports dark mode, high-contrast, and custom brand themes out of the box.
62%
  1. Token palette — 48 semantic tokens
  2. Dark mode — automatic via color-scheme
  3. A11y — WCAG AA verified for all states
Generated CSS (using image())
Loading…
/* image(<color>) works anywhere <image> is accepted */

.accent-bar    { background-image: image(#0022ff); }
.progress-fill { background-image: image(oklch(65% 0.22 140)); }
.themed-list   { list-style-image: image(var(--brand)); }

/* vs. the old approaches:
   - inline SVG data URI:  url("data:image/svg+xml,...%23fff...") — fragile, verbose
   - CSS gradient:         linear-gradient(#0022ff, #0022ff) — works but semantically wrong
   - image() bare color:  image(#0022ff) — concise, spec-correct, themeable  */

see also

implementation reference

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