You can find a very detailed explanation about the how behind in my Taming Blend Modes: `difference` and `exclusion` article on @csstricks https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

And here are cards with gradual left to right inversion: from no inversion at all on the left, to full inversion on the right. Again, minimal code, single div, no pseudos necessary, 2 #CSS declarations.

Live demos on @codepen

https://codepen.io/thebabydino/pen/mdOzLxE

https://codepen.io/thebabydino/pen/dyOVgeR

Here's another set of cards with varying patterns, all created with the exact same 4 blended CSS gradients, it's just the stops list `--c` that changes for each card.

So basically, it's again just one `background` + one `background-blend-mode` property.

Live demo on @codepen
https://codepen.io/thebabydino/pen/vYyNyER

And here's a cards demo with a cool, yet very simple trick: these left to right gradients are vibrant at the top, but then progressively get more and more desaturated going down, until fully grey.

Live on @codepen https://codepen.io/thebabydino/pen/xxzjJXL - only 2 CSS declarations necessary!

By the way, the code is heavily commented https://codepen.io/thebabydino/pen/MYWxeew

So you can see how it works without JS, without wrapping individual elements into spans, just letting it wrap naturally. And without covers that wouldn't allow for an image backdrop behind the text.

If we have an inline `span` inside a `p` & we give it a semi-transparent `background` + a `padding`, we get an alpha increase where backgrounds of adjacent lines overlap.

How would you solve this problem without text duplication, without stacking 2 identical `p` elements, one for background (opaque background + transparent text + opacity) and one for text (transparent background)?

By the way, this is my second article for Frontend Masters.

My first was a few months ago and it was about creating dynamic split effects (image, text, page) without any content duplication whatsoever https://frontendmasters.com/blog/split-effects-with-no-content-duplication/