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 “w3wiki” 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" > w3wiki </ text > </ svg > </ body > </ html > |
Output:
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.