html - 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 background1 on one side and color2 plus background2 on the other side?

Example Code to copy:

<div style="width: 50%; background-color: black; overflow: hidden; height: 300px;display: inline-block;">
    <p style="width: 200%; color: white">
    I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do the same effect without duplicated content? I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do the same effect without duplicated content?
    </p>
    </div><div style="width: 50%; background-color: white; overflow: hidden; height: 300px;display: inline-block;">
    <p style="width: 200%; color: black; transform: translateX(-50%)">
    I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do the same effect without duplicated content? I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do the same effect without duplicated content?
    </p>
    </div>

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

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