Text with two colors

Question

I would like to have a text that switches its color at a certain point x. I have provided a sample that uses the text twice to produce the result, with the switch at 45px. I

Answer 1

If you want absolute sizing, you can do this in SVG using a filter.

<svg x="0px" y="0px" width="800px" height="50px" viewBox="0 0 800 50">
  <defs>
    <filter id="bicolor">
      <feFlood x="0" y="0" width="800" height="50" flood-color="blue" result="blue-field"/>
      <feFlood x="50" y="0" width="750" height="50" flood-color="red" result="red-field"/>
      <feMerge>
        <feMergeNode in="blue-field"/>
        <feMergeNode in="red-field"/>
        </feMerge>
        <feComposite operator="in" in2="SourceGraphic"/>
      </filter>
    </defs>
      <text filter="url(#bicolor)" x="20" y="20" width="200" height="20">BICOLOR Text and stuff</text>
  </svg>

Answer 2

In Webkit only we have the -webkit-background-clip:text property/value.

body {
  text-align: center;
}
h1 {
  display: inline-block;
  font-size: 36px;
  background: linear-gradient(to right, red 0%, red 50%, blue 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>LONG HEADING TEXT</h1>

Answer 3

You can use :before and :after pseudo classes:

div {
  width: 400px;
  height: 40px;
  border: 1px solid #000;
  position: relative;
}

div:before,
div:after {
  content:attr(data-text);
}

div:after{
  position: absolute;
  top: 0;
  left: 0;
}

div:after {
  color: blue;
  clip: rect(0 200px 40px 45px);
}

div:before {
  color: red;
  clip: rect(0 45px 40px 0);
}

<div data-text="Some bicolored Text">
</div>

Answer 4

You can use a pseudo element for this. It will allow you to

• change the color in the middle of a letter
• keep the semantics of the content displayed
• prevent semantic duplicate content

h1{
  position:relative;
  text-transform:uppercase;
  color:#000;
}
h1:before{
  content: attr(data-content);
  position:absolute;
  top:0; left:0;
  width:2.2em;
  overflow:hidden;
  color:#ccc;
}

<h1 data-content="Bicolor">Bicolor<h1>

output :

Note that the clip property has been deprecated. In this example, I used the overflow property instead for the same result.

Answer 5

Got it! Mixed a few things from the answers together to get this:

div{
  border: 1px solid #000;
  position: relative;
  display: inline-block;
}
div>span{
  color: rgba(0, 0, 0, 0);
  z-index: 3;
}

div:before, div:after{
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
div:before{
  color: blue;
  clip: rect(0 200px 40px 45px);
  z-index: 1;
}
div:after{
  color: red;
  clip: rect(0 45px 40px 0);
  z-index: 2;
}

<div data-content="Some bicolored Text">
    <span>Some bicolored Text</span>
</div>

Upvoted all the answers for partial solutions.

Answer 6

Another possible option is to use SVG. You can create multi colored text in SVG using gradients. If two adjacent gradient stops are at the same position then you will get a sharp transition between colors. If two adjacent gradient stops are at different positions then you will get a smooth transition between colors. You can have as many color stops as you want. For example...

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

Note that in SVG, the color stops are at relative positions (e.g. 0 to 1, 0% to 100%). This could make it a little hard if you are trying to place the color stops at specific pixel locations.

Note that in SVG, you have to manually position the text element within the svg element.