Blend text with plus-lighter

plus-lighter makes light text take on the color behind it.

Paco Coursey@pacocoursey
Recent work: the @Linear Conversations on Quality series website. My two favorite details: `plus-lighter` to blend text with a dynamic background, and a fully custom video player. https://linear.app/quality/07
Nov 1, 2024View on X ↗

The post links a site; the demo rebuilds its text blend on a dark stage.

Backdrop

1 · Text on a moving backdrop

Pick a backdrop, pause it, and compare the two headlines.

Flat whiteBad

Conversations on Quality

Episode 07 · Craft over speed

color: #f5f5f5Pasted on top
plus-lighterGood

Conversations on Quality

Episode 07 · Craft over speed

mix-blend-mode: plus-lighterTakes the color
.stage { isolation: isolate; background: #0b0b0f; } /* dark backdrop */
.title {
  color: #b0b0b0;               /* mid grey, not white */
  mix-blend-mode: plus-lighter; /* adds the backdrop colour to it */
}

Why it matters, pros and cons

Why it matters

plus-lighter adds the pixels beneath to the text, so it lights up and tints with the color passing behind.

Pros

  • Type feels part of the scene instead of a sticker laid over it.
  • Contrast follows the backdrop for free: the text only gets brighter, never darker.
  • One declaration; no JavaScript or per-frame color sampling.

Cons

  • Needs a dark backdrop: on light colors the sum clips to white and the text vanishes.
  • Text color is no longer fixed, so check contrast at the dimmest and brightest moments.
  • Blend modes can disable some GPU shortcuts, so keep it to a few large text blocks.