v150 · CSS · Generated Content

content & border-image Fills

Anywhere a <image> is accepted in CSS — including content and border-image — you can now pass a bare color via image(<color>). This replaces the common 1-pixel GIF trick and makes color-driven generated content a first-class CSS pattern.

Requires Chrome 150+. The content: image(color) syntax has been valid per spec but unimplemented until now. In older browsers, ::before and ::after with this value simply don't render.

content: image() — avatar placeholders

Colored avatar circles via ::before { content: image(var(--avatar-color)) } — no SVG, no URL

AJ
KL
MN
PR
ST

border-image: image() — single-edge accents

Using border-image: image(<color>) slice / widths to create colored edge accents on individual sides

border-image on top edge (blue)
image(--accent-blue) 1 / 6px 0 0 0
border-image on bottom edge (green)
image(--accent-emerald) 1 / 0 0 6px 0
border-image on left edge (rose)
image(--accent-rose) 1 / 0 0 0 8px
border-image all edges
image(oklch(70% 0.12 30)) 1 / 4px
Fat left accent bar
image(oklch(60% 0.14 270)) 1 / 0 0 0 16px

code

/* content: image(<color>) — avatar placeholder via generated content */
.avatar::before {
  content: image(var(--avatar-color, oklch(70% 0.12 250)));
  /* generates a solid-color rectangle, no url() or SVG needed */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: block;
}

/* Before: required a data URI or a real 1px image file
.avatar::before {
  content: url("data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAA...==");
  background: var(--avatar-color); // still needed for actual color
}
*/

/* border-image: image(<color>) — single-edge accent without border-color */
.card-top-accent {
  border-top: 6px solid transparent;
  border-image: image(var(--accent-blue)) 1 / 6px 0 0 0;
  /* slice / top-width right-width bottom-width left-width */
}

/* Per-edge colored accents with different colors per side */
.card-all-edges {
  border-image: image(oklch(70% 0.12 30)) 1 / 4px;
}

see also

implementation reference

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