How to create linear gradient text by using HTML ? Last Updated : 21 Feb, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. Comment More infoAdvertise with us Next Article How to put Gradient Colors in a website ? S satyamn120 Follow Improve Article Tags : HTML HTML-Questions Similar Reads How to Make Gradient Button in HTML? Gradients are smooth transitions between multiple colors, offering a visually appealing and modern way to design elements. In HTML, gradients are typically applied using CSS.We will discuss the different approaches to making gradient buttons in HTML:Table of ContentUsing Linear GradientsUsing Radial 4 min read How to put Gradient Colors in a website ? In this article, we will learn about how to put Gradient colors on a website, CSS gradients are images made by the transition between two or more colors. There are three types of gradients which are given below: Linear GradientRadial GradientConical GradientImage shows the types of gradients Linear 2 min read How to Create a Curve Text using CSS/Canvas ? Creating curved text using CSS3 or Canvas adds dynamic visual appeal to web design, offering flexible and creative ways to display headings and decorative elements along curved paths. There are several methods to curve text in web technologies. The simplest ways are by using jQuery plugins and SVG, 3 min read HTML canvas createLinearGradient() Method The HTML Canvas createLinearGradient() method is used to create a linear gradient object. The gradient can be used to fill different colors in rectangles, circles, lines, text, etc. We can then assign the gradient color to the strokeStyle or fillStyle properties to fill or draw shapes such as rectan 2 min read How to change Background Gradient on Scroll ? Linear gradient provides the color transition along a straight line. A Radial gradient provides the color transition that radiates outward from a central point. Creating a gradient background color that changes on scroll using CSS involves combining CSS for gradients to handle the scrolling effect. 4 min read How to Make a Vertical Line in HTML The vertical line in HTML can be created using border-left or border-right, often combined with the height and position properties. Nearly 85% of HTML layouts use vertical lines for visual separation, especially in navigation menus and content sections. Below is a preview of a vertical line, followe 2 min read Like