With CSS is it possible to put 2 colors in 1 letter? Or half the text with a different color?

Question

I wonder if with CSS you can leave only half a letter, or half a word, with another color and the other half with another?

It would be possible to get this result from the image below only with CSS?

This is the base model I have at the moment.

h1 {
    font-family: sans-serif;
    font-size: 6rem;
    color: red;
    margin:.15em;
}

<h1>A</h1>
<h1>ABC</h1>

Answer 1

The closest I could get was using background-clip: textand text-fill-color: transparent.

Behold:

.two-colors{
   font-size: 160px;
   background: linear-gradient(to right, blue 50%, red 0);
   -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 
  font-weight: 900;
  font-family: Arial;
  
}

<span class="two-colors">A</span>
<span class="two-colors">B</span>
<span class="two-colors">ABC</span>

I developed the CSS similar to this response in the SOEN, however I changed the direction of the gradient, to be half and half vertically colors and preferred to apply the style letter by letter.

In case, for the letters to be "in the same line", it is necessary that the element that receives the style has defined the display with the value inline-block or inline.

Answer 2

You can use an SVG with text inside it.

<svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="bicolored">
            <stop offset="33%" stop-color="red"/>
            <stop offset="33%" stop-color="blue"/>
        </linearGradient>
        <linearGradient id="tricolored">
            <stop offset="33%" stop-color="red"/>
            <stop offset="33%" stop-color="green"/>
            <stop offset="66%" stop-color="green"/>
            <stop offset="66%" stop-color="blue"/>
        </linearGradient>
        <linearGradient id="smooth">
            <stop offset="33%" stop-color="red"/>
            <stop offset="66%" stop-color="blue"/>
        </linearGradient>
    </defs>
    <text x="0" y="20" fill="url(#bicolored)">Some bicolored Text</text>
    <text x="0" y="40" fill="url(#tricolored)">Some tricolored Text</text>
    <text x="0" y="60" fill="url(#smooth)">Some smooth gradient Text</text>
</svg>

Source: https://stackoverflow.com/a/34293307/1452488

Answer 3

Using only CSS to do it this way

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(left, red 10%, blue 0%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>
The BLA BLA
</h1>

Answer 4

One more...

h1 {
    font-family: sans-serif;
    font-size: 6rem;
    margin: .15em;
    background: -webkit-linear-gradient(left,blue 50%, red 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline;
}

<h1>A</h1>

<h1>ABC</h1>

Answer 5

It is also possible using a pseudo-element ::after with the content:"A" same as the text <h1>A</h1>, but "cut" at 50% width.

h1 {
    font-family: sans-serif;
    font-size: 6rem;
    color: red;
    margin:.15em;
    position: relative;
    display: inline-block;
}
h1::after {
    content: attr(data-texto);
    position: absolute;
    overflow: hidden;
    width: 50%;
    top: 0;
    left: 0;
    color: blue;
    text-transform: uppercase;
pointer-events: none;
  user-select: none;
}

<h1 data-texto="a">A</h1>
<h1 data-texto="ABC">ABC</h1>