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

You can also use background-clip:text to color the text with a gradient and you can easily have any combination of color:

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

#main>p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color:transparent;
}

<div id="main">
  <p>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.</p>
</div>

Answer 2

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;
}

<div id="main">
<p>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.</p>
</div>