How to create linear gradient text by using HTML ?

Last Updated : 21 Feb, 2023

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.

HTML

<!DOCTYPE html> 
<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          How to create linear gradient  
          text by using HTML ? 
      </title> 
</head> 
  
<body> 
    <svg> 
        <defs> 
            <linearGradient id="gradient" 
                x1="0%" y1="0%" x2="100%" y2="0%"> 
                <stop offset="0%" 
                    style="stop-color:red;" /> 
                <stop offset="50%" 
                    style="stop-color:orange;" /> 
                <stop offset="100%" 
                    style="stop-color:yellow;" /> 
            </linearGradient> 
        </defs> 
          
        <text x="10" y="50" 
            fill="url(#gradient)" 
            font-size="45"> 
            GeeksforGeeks 
        </text> 
    </svg> 
</body> 
  
</html>

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.

Suggest improvement

How to create linear gradient text using HTML and CSS ?

Share your thoughts in the comments