How to create linear gradient text by using HTML ?

Creating linear gradient text on a webpage can add a dynamic and visually interesting touch to the design. While it is typically created using CSS, it is also possible to create linear gradient text using only HTML.

Approach: Using the `<svg>` Element: The `<svg>` element in HTML provides a way to create vector graphics on a webpage. To create a linear gradient text using the `<svg>` element, we can use the `<linearGradient>` and `<text>` elements to define the gradient and text respectively.

First, we need to create an `<svg>` element in the HTML document. This will create an `<svg>` element on the page with a linear gradient defined in the `<defs>` section with red at the start, orange in the middle, and yellow at the end. The `<text>` element is used to write the text “GeeksforGeeks” on the page with the fill attribute set to the gradient using the URL “#gradient”.

Example: Here is an example of a complete HTML document that uses the SVG method to create linear gradient text.

Output:

How to create linear gradient text by only using HTML?

Conclusion: Creating a linear gradient text using HTML is possible by using the `<canvas>` or `<svg>` element. It is important to note that, while this method can be useful in certain situations, it’s not as flexible as using CSS, and might not be supported by older browsers.

Noted: This solution would work with most modern browsers, however, for older browsers, this might not work as intended.

satyamn120

Follow

Improve

Article Tags :

• HTML
• Web Technologies
• HTML-Questions