How to Create a Multicolor Text with HTML and CSS

Multicolor texts can make your website more attractive and interesting for visitors. This snippet will help you to learn how to create such texts for your website.

There are 3 ways of creating a multicolor text. Let’s dive in and try it together.

Use image editors

You can create a multicolor text with the help of image editors such as Pixelmator, Photoshop and so on. So, you can create a multicolor image and embed it into your website.

The multicolor text will not be searchable with this method.

As a result, your code will look like the following:

<img src="multicolortext.png"/>

Make separate elements

Another way is creating a text with separate elements by using the HTML <span> tag, which is an empty container. This means that you create a multicolor text by putting each letter in a separate element to define a different color for each letter of your text.

Example of creating a multicolor text with separate elements in HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <span style="color:#FF0000">H</span>
    <span style="color:#66CC66">e</span>
    <span style="color:#FF9966">l</span>
    <span style="color:#FFCCCC">l</span>
    <span style="color:#FF0066">o</span>
  </body>
</html>

Result

H e l l o

Use CSS

And finally, you can use CSS. This is the easiest way of creating such kind of text.

Put your text in a <span> tag and give it a class name "multicolortext". Then, you need the CSS background-image property to add a gradient background to your text with its "linear-gradient" value, where you put the names of your preferred colors.

To get multicolor text instead of the multicolor background, you need to use the background-clip property, which lets you control how far a background image or color extends beyond the element's padding or content. This step gives some colors to your text, but not exactly what you want.

You can get the final result by making your text color transparent with the color property so that the background color will be reflected in the text.

Example of creating a multicolor text with HTML and CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicolortext {
        background-image: linear-gradient(to left, violet, indigo, green, blue, yellow, orange, red);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;
      }
    </style>
  </head>
  <body>
    <h1>
      <span class="multicolortext">Let’s be creative!</span>
    </h1>
  </body>
</html>

Do you find this helpful?

Related articles