Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn the art of coloring text on web pages using HTML & CSS. 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.

Using <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. Utilize color options such as color names, hex codes (e.g., “#0000ff”), and RGB codes (e.g., “RGB (0, 153, 0)”).

Syntax :

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

Attribute Values:

Attribute Values

Description

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 1:

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:

Using linear-gradient attribute.

It is used for text-styling in which the text is filled with linear-gradient color codes.

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 2:

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:



Last Updated : 12 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads