1 / 2
Inverting Headline: White Minus the Backdrop
One line, and the headline stops needing a colour. mix-blend-mode: difference subtracts the two layers channel by channel, so white text hands back the exact inverse of whatever is under it: black on a bright sheet, white on a dark hero, cyan over magenta, all of it per pixel and without a second copy of the text. Three things bound it. Mid grey is the blind spot, since 128 against 255 comes back as 127, the grey it was meant to beat. Only white is a true invert, because any other colour has channels it cannot fully subtract. And a blended element reads everything painted beneath it in its stacking context, so isolation: isolate on the scene is what stops the headline from subtracting the whole page.
csscontrasttypographytextcolorblend-modeno-jshero