Dual-Color Text

Question

is there a way to achieve the effect in the sample below, without duplicating content, just using html and css?

So you basically have a Text that is color1 and backg

Answer 1

Yes, by setting the mix-blend-mode CSS property to the value difference. (I've also given an example of how you can create this background image without transform.)

As an added bonus, this also makes text selection work properly. :)

#main {
  background: linear-gradient(to right, #000 50%, #fff 50%);
}

#main > p {
  color: #fff;
  mix-blend-mode: difference;
}

I am multicolor text. Multicolor text i am. This really does feel great. No duplicated content was needed for this effect. It's created by using blending effects. I am multicolor text. Multicolor text i am. This really does feel great. No duplicated content was needed for this effect. It's created by using blending effects.