How to create multiple-color text in HTML CSS?

To create multiple-color text, you need to write CSS for the different parts of the text.

In this post, I will show you how to use multi-color in a sentence & word.

This is the technique I used on many websites that helped me to make attention-grabbing content.

Let’s see how you can do that.

How to create multicolor text in HTML CSS?

You can use two main different ways to implement multiple colors in a single sentence or word. One is a gradient color and the other one is a simple color property.

Together we will explore all the examples that are used in the real world.

Make a multicolor sentence using the CSS color property

To create a multiple-color sentence, I wrapped the words in <span> tags and gave them unique class names. This is how you can assign different color values to each word in your CSS.

See my code below:

HTML

<h2><span class="c1">This</span> is <span class="c2">an</span> <span class="c3">example</span> <span class="c4">sentence</span>.</h2>

CSS

span.c1 {
  color: #E53D30;
}
span.c2 {
  color: #FCC421;
}
span.c3 {
  color: #249544;
}
span.c4 {
  color: #0087D2;
}

Output

Make a multiple-color word

In the same vein, you can wrap each of the letters in a <span> tag and unique class name. So you can write different color values for each letter.

I have the following code for the above example:

HTML

<p><span class="c1">E</span><span class="c2">x</span><span class="c3">a</span><span class="c4">m</span><span class="c5">p</span><span class="c6">l</span><span class="c7">e</span></p>

CSS

p {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
}
p span.c1 {color: #E53D30;}
p span.c2 {color: #FCC421;}
p span.c3 {color: #249544;}
p span.c4 {color: #0087D2;}
p span.c5 {color: #b818f2;}
p span.c6 {color: #04b89d;}
p span.c7 {color: #62f711;}

Output

Make multiple colors of text using gradient

As I mentioned earlier, you are just not limited to span tags and writing custom CSS for each span. You can also use the gradient color to make multicolor text (sentence, word & letter).

See an example below:

HTML

<h3>This is an example heading that uses gradient colors.</h3>

CSS

background: -webkit-linear-gradient(#06ba0f, #E20D0D);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Output

And it brings me to the end of this post.

Build HTML CSS projects

Conclusion

I gave you a couple of examples of multicolor texts. You also got the HTML & CSS for those examples. If you have any questions, please let me know.