How to create a multi-colored text on a web page with separate elements and with CSS in HTML?

Views: 201
Comments: 0
Like/Unlike: 0
Posted On: 16-Dec-2022 01:51 

Share:   fb twitter linkedin
Pratibha
Teacher
20 Points
2 Posts

In this article, we will create a multicolor text on a web page with different colors, use the 

<font color=”color”>…</font>

 tags for every character that you want to apply color.

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

Output:

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>

Output:

 

 

0 Comments
 Log In to Chat