How to create multicolored text in a web page using HTML and CSS ?
Last Updated :
12 Jan, 2024
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:
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:
Share your thoughts in the comments
Please Login to comment...