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

  
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.