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.
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
How to set text color & font style in HTML ? In this article, we will learn how to set text color & font style in HTML. The <style> tag in HTML helps us to set the text color & font style in HTML. This modification includes changing font size, font family, font color, etc. Not only the text but also we can change the style of a b
2 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