Invert text under the pill

A blend-mode pill flips the label under it as it slides.

Paco Coursey@pacocoursey
Exclusion tabs from Stripe
May 6, 2022View on X ↗

The post is a video of Stripe's nav; the demo rebuilds the technique.

Slide between tabs

Click a tab or press ← →. Try slow motion.

Text swaps earlyBad
[aria-selected] { color: dark }
Blend flips textGood
mix-blend-mode: exclusion
.bar { isolation: isolate; background: #0a0a0a; }
.tab { color: #fff; }                /* every label is white */

.pill {
  background: #fff;
  mix-blend-mode: exclusion;         /* white over white = black */
  transform: translateX(var(--x));
  transition: transform 250ms var(--ease-out);
}

Why it matters, pros and cons

Why it matters

A label changes color in one step, but the pill crosses it gradually. Blending flips it pixel by pixel.

Pros

  • Text stays readable at every point of the slide, even while the pill is between tabs.
  • No second copy of the labels and no clip-path to keep in sync.
  • The pill can be any width, so it works for tabs of different lengths.

Cons

  • Exclusion only gives true inversion with white on black; other colors shift hue.
  • Blend modes on a moving layer can cost paint time on weak devices.
  • Forced-colors mode and some screenshot tools skip blending, so test it there.