How to Create Multicolored Text using HTML and CSS?

The CSS linear gradient property is used to create a multicolored text using HTML and CSS. The deprecated <font> was also used for basic color applications.

1. Using <font> color Attribute

The <font> element is deprecated in HTML5 and still be used to specify the text color. You can apply this to each character, word, or entire line of text.

Syntax

<font color="color_name">Text content</font>

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

Output

2. Using linear-gradient Attribute

CSS is used to create a multicolored text effect with a linear gradient. This method involves setting a background gradient for the text and using webkit properties to clip the background to the text.

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.

<div style="text-align: center; font-size: 50px;
    		background: linear-gradient(to left,violet,
            indigo, blue, green, yellow, orange, red);
    		-webkit-background-clip: text;
    		color: transparent;">
    Welcome To GeeksforGeeks!
</div>

Output