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

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

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

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.

Make your hands dirty

Build HTML CSS projects

<table><tbody><tr><td><a href=“/about-page-template/”>About us template</a></td><td><a href=“https://shihabiiuc.github.io/aboutpage/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/team-page/”>Team page</a></td><td><a href=“https://shihabiiuc.github.io/team-members-section/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/testimonial-template/”>Testimonial page</a></td><td><a href=“https://shihabiiuc.github.io/testimonialpage/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/testimonial-slider/”>Testimonial slider</a></td><td><a href=“https://shihabiiuc.github.io/testimonialslider/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/contact-page-html-css/”>Contact page</a></td><td><a href=“https://shihabiiuc.github.io/contact-page/contact-us.html” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/create-multiple-page-website-html/”>Multipage website</a></td><td><a href=“https://shihabiiuc.github.io/multipagehtml/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/portfolio-website-design-with-html-css/”>Portfolio website</a></td><td><a href=“https://shihabiiuc.github.io/portfolio/index.html” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/animated-portfolio-website/”>Animated portfolio</a></td><td><a href=“https://shihabiiuc.github.io/animated-portfolio/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/computer-science-portfolio-website/”>Computer science portfolio</a></td><td><a href=“https://shihabiiuc.github.io/computerscienceportfolio/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/html-navigation-bar/”>Navigation bar (without JS)</a></td><td>N/A</td></tr><tr><td><a href=“/hamburger-menu/”>Create a hamburger menu</a></td><td><a href=“https://shihabiiuc.github.io/hamburger-menu/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/html-footer/”>Footer templates</a></td><td><a href=“https://shihabiiuc.github.io/footer-examples/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/hero-banner-image-using-html-css/”>Hero banner</a></td><td><a href=“https://shihabiiuc.github.io/herobanner/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/background-slider/”>Background slider</a></td><td><a href=“https://shihabiiuc.github.io/backgroundslider/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/how-to-create-3-column-layout-in-html-css/”>Three-column layout template</a></td><td><a href=“https://shihabiiuc.github.io/column-layout/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/two-column-layout-html-css/”>Two column layout</a></td><td><a href=“https://shihabiiuc.github.io/two-column-layout/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/thank-you-page-html-css/”>Thank you page</a></td><td><a href=“https://shihabiiuc.github.io/thank-you/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/resume-html-css/” data-type=“link” data-id=“http://localhost/shihabiiuc/resume-html-css/">Resume template</a></td><td><a href=“https://shihabiiuc.github.io/resume/” data-type=“link” data-id=“https://shihabiiuc.github.io/resume/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/coming-soon-template/” data-type=“link” data-id=“http://localhost/shihabiiuc/coming-soon-template/">Coming soon template</a></td><td><a href=“https://shihabiiuc.github.io/coming-soon/” data-type=“link” data-id=“https://shihabiiuc.github.io/coming-soon/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/create-landing-page-using-html-css-js/” data-type=“link” data-id=“http://localhost/shihabiiuc/create-landing-page-using-html-css-js/">Landing page template</a></td><td><a href=“https://shihabiiuc.github.io/landing-page/” data-type=“link” data-id=“https://shihabiiuc.github.io/landing-page/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/roofing-website-template-for-download-responsive/” data-type=“link” data-id=“http://localhost/shihabiiuc/roofing-website-template-for-download-responsive/">Roofing website template</a></td><td><a href=“https://shihabiiuc.github.io/roofing-website/” data-type=“link” data-id=“https://shihabiiuc.github.io/roofing-website/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr></tbody></table>

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.