How to create multicolored text in a web page using HTML and CSS ?
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.
Table of Content
- Using color attribute
- Using linear-gradient attribute.
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 w3wiki! </ div > </ body > </ html > |
Output:
Contact Us