Multi 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 words & sentences.

Let’s see how you can do that.

Table of Contents hide
  1. 1 How to create multicolor text in HTML CSS?
    1. 1.1 Make a multicolor sentence using the CSS color property
      1. 1.1.1 HTML
      2. 1.1.2 CSS
      3. 1.1.3 Output
    2. 1.2 Make a multiple-color word
      1. 1.2.1 HTML
      2. 1.2.2 CSS
      3. 1.2.3 Output
    3. 1.3 Make multiple colors of text using gradient
      1. 1.3.1 HTML
      2. 1.3.2 CSS
      3. 1.3.3 Output
  2. 2 Conclusion

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

multiple color sentence
Multiple color sentence

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

This is an example sentence.

Make a multiple-color word

Multiple color word
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

Example

Make multiple colors of text using gradient

Multicolor sentence using gradient CSS

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

This is an example heading that uses gradient colors.

Conclusion

Now it’s your turn.

I gave you a couple of examples and codes for multiple-color text.

Were you able to create multicolor text by following my explanation?

Or are you missing an example that you were looking for?

Let me know.