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

20 Aug, 2021
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.
CSS-Functions
CSS-Properties
HTML-Attributes
HTML-Questions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)