How to use linear-gradient attribute. In HTML
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:
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.