Skip to content
Related Articles

Related Articles

Improve Article

How to create multicolored text in a web page using HTML & CSS ?

  • Last Updated : 20 Aug, 2021
Geek Week

In this article, we will learn to color the text in the web page using HTML & CSS. Basically, we can either use <font> color attribute in HTML or linear-gradient to multi-color the text using CSS. We will explore both methods & understand their usage with the help of examples.

Methods :

  • <font> color attribute:  It is used to specify the text color inside the <font> element. It can be used for every character that you want to apply color or an entire word.
  • linear-gradient() function: It is used for text-styling in which the text is filled with linear-gradient color codes.

Method 1: Using <font> color attribute.

Syntax :

<font color="color_name|hex_number|rgb_number">Text content</font>

 



Attribute Values:

  • hex_number: It sets the text color by using color hex code. For example “#0000ff”.
  • rgb_number: It sets the text color by using RGB code. For example: “rgb(0, 153, 0)”.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
    <style>
        h1 {
            color: green;
            font-size: 60px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>
            Welcome To
            <font color="#FF2626">G</font>
            <font color="#252A34">e</font>
            <font color="#753422">e</font>
            <font color="#FFD523">k</font>
            <font color="#71EFA3">s</font>
            <font color="#0F52BA">for</font>
            <font color="#66CC66">G</font>
            <font color="#FF9966">e</font>
            <font color="#FFCCCC">e</font>
            <font color="#00C1D4">k</font>
            <font color="#EFE3D0">s</font>
        </h1>
    </center>
</body>
  
</html>

Output:

Method 2: Using linear-gradient attribute.

Syntax:

background: linear-gradient(to left, color names);
-webkit-background-clip: text;
color: transparent;

Steps to add multicolor into text:

  • Add a simple text inside the <div> tag with the required selector.
  • Apply the linear gradient property with any colors of your choice.
  • Apply webkit properties that will fill the text with the gradient background and declare the color property with transparent background.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8" />
    <style>
        .multicolor-text {
            text-align: center;
            font-size: 50px;
            background: linear-gradient(to left,
                    violet,
                    indigo,
                    blue,
                    green,
                    yellow,
                    orange,
                    red);
            -webkit-background-clip: text;
            color: transparent;
        }
    </style>
</head>
  
<body>
    <div class="multicolor-text">
        Welcome To GeeksforGeeks!
    </div>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :