How to create a multi-colored text on a web page with separate elements and with CSS in HTML?
Pratibha
78
Points
8
Posts
In this article, we will create a multicolor text on a web page with different colors, use the
<font color=”color”>…</font>tags for every character that you want to apply color.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<span style="color:#FF0000">H</span>
<span style="color:#66CC66">e</span>
<span style="color:#FF9966">l</span>
<span style="color:#FFCCCC">l</span>
<span style="color:#FF0066">o</span>
</body>
</html>Output:
Creating a multicolor text with HTML and CSS
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.multicolortext {
background-image: linear-gradient(to left, violet, indigo, green, blue, yellow, orange, red);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<h1>
<span class="multicolortext">Let’s be creative!</span>
</h1>
</body>
</html>Output:
0 Comments
