Style half of a character

I know you say you do not want degraded but only two colors ... the thing is that you can use the CSS gradient "without gradient", only to have two colors.

The gradient works automatically: you indicate a start color, optional intermediate colors and a final color, and the browser will be in charge of making the transition from one color to another. Now, if as intermediate colors you indicate that you want the initial color and the final color, then the gradient effect disappears leaving only the two desired colors.

The idea would be to put the first color in 0 and 0.5, and the final color in 0.5 and 1. That way there is no gradient, but it jumps from one to the other directly:

.dos-colores {
  font-size: 60px;
}

.dos-colores > span {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f00), color-stop(0.5, #f00), color-stop(0.5, #0a0), color-stop(1, #0a0));
  background-image: gradient( linear, left top, right top, color-stop(0, #f00), color-stop(0.5, #f00), color-stop(0.5, #0a0), color-stop(1, #0a0));
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<div class="dos-colores">
  <span>H</span>
  <span>O</span>
  <span>L</span>
  <span>A</span>
</div>

This method is cleaner and allows more flexibility (you could have as many colors as you wanted without limiting the number of pseudo-elements), but it has the disadvantage that its support may not be as good (it surely fails in the versions of IE before 10, and you may need the browser prefixes to work in all).

And it could be simplified a bit more using linear-gradient instead of gradient , making it easier to read:

.dos-colores {
  font-size: 60px;
}

.dos-colores > span {
  background: -webkit-linear-gradient(to right, #f00 50%, #0a0 50%);
  background: linear-gradient(to right, #f00 50%, #0a0 50%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<div class="dos-colores">
  <span>H</span>
  <span>O</span>
  <span>L</span>
  <span>A</span>
</div>

A simple option would be to make use of the pseudo elements ::before or ::after for this.

The idea would be to write the letter and using, for example ::before , write the same letter above with another color, positioning it exactly above the original letter (with position: absolute ) and hiding the excess (with oveflow: hidden ) . That way one part of the visible letter will be the pseudo-element and the other half the original element.

For the letter to appear with the right half of one color and the left half of another (horizontal division of colors) it would be necessary for the pseudo-element to occupy 50% of the width. If you want a vertical color division to appear, then it would be 50% of the height.

Here you can see it working:

.letras-partidas span {
  position: relative;
  color: black;
  font-size: 60px;
}

.letras-partidas span::before {
  content: attr(data-letra);
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: red;
}

.letras-partidas.vertical span::before {
  content: attr(data-letra);
  width: 100%;
  height: 50%;
  color: red;
}

<div class="letras-partidas">
  <span data-letra="H">H</span>
  <span data-letra="O">O</span>
  <span data-letra="L">L</span>
  <span data-letra="A">A</span>
</div>

<div class="letras-partidas vertical">
  <span data-letra="C">C</span>
  <span data-letra="A">A</span>
  <span data-letra="R">R</span>
  <span data-letra="A">A</span>
  <span data-letra="C">C</span>
  <span data-letra="O">O</span>
  <span data-letra="L">L</span>
  <span data-letra="A">A</span>
</div>

* If the text will occupy a single row, then you could simplify the example with vertical colors, applying the styles directly to the container without having so many labels.

From that, you can make more elaborate examples:

Do you want instead of 2 colors to be 3? Use ::before and ::after and instead of 50%, make the pseudo-elements occupy 66% and 33% respectively:

.letras-partidas span {
  position: relative;
  color: green;
  font-size: 60px;
}

.letras-partidas span::before,
.letras-partidas span::after {
  content: attr(data-letra);
  position: absolute;
  top: 0;
  left: 0;
  width: 66%;
  overflow: hidden;
  color: red;
}

.letras-partidas span::after {
  color: blue;
  width: 33%;
}

<div class="letras-partidas">
  <span data-letra="H">H</span>
  <span data-letra="O">O</span>
  <span data-letra="L">L</span>
  <span data-letra="A">A</span>
</div>