How to Create a Multicolor Text in 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.

1. Use Image editors!

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

Note that with this method the multicolor text will not be searchable.

As a result, your code will look like this:

<img src="multicolortext.png"/>

2. Make separate elements!

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

Example

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

3. Use CSS!

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

An example of a multicolor text can be a rainbow text, which looks quite appealing. Let’s create one step by step.

As always, you need HTML as a base. First of all, you should put your text in an HTML <h1> tag and give it a class name "multicolor text":

<h1 class="multicolortext">Lets be creative!</h1>

Then you need the CSS background-image property which adds a gradient background to your text with the help of linear-gradient function, where you put the names of the colors that you prefer.

In order to get multicolor text instead of the multicolor background, you need to use CSS background-clip property, which lets you control how far a background image or color extends beyond an 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 help of CSS color property so that the background color will be reflected in the text. It’s done simply like this:

.multicolortext {
background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);  
-webkit-background-clip: text;
-webkit-background-clip: text;
-moz-background-clip: text; 
background-clip: text;
color: transparent;
}

Now let’s bring together all the parts and see the complete code example:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body .multicolortext {
      background-image: linear-gradient(to left, violet, indigo, blue, green, 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