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

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:


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


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


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:


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


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



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:


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


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


This is an example heading that uses gradient colors.

And it brings me to the end of this post.

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview
Coming soon templatePreview
Landing page templatePreview
Roofing website templatePreview


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.