How to create gradient search button using HTML and CSS ?

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 ? — 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.

How to create gradient search button using HTML and CSS ?

satyamn120

Improve

Article Tags :

Similar Reads

How to create linear gradient text using HTML and CSS ?

The linear-gradient is used to create eye-catching text effects, particularly suitable for dark-themed websites or applications. This method involves filling text with linear-gradient color codes, making it look attractive and bold. Linear-gradient text effects are ideal for dark themes and provide

How to create linear gradient background using CSS ?

In CSS, we can use the background-color property to set the background color of an element to a specific color.Â Sometimes we want to add more styling to the element when setting the background color by using the linear-gradient property. CSS linear-gradient property lets you display smooth transitio

How to create gradient search button using HTML and CSS ?

In this article, we will see how to create a gradient search button using HTML & CSS, along with knowing its basic implementation through the examples. The creation of a gradient search button involves the CSS linear-gradient() function, which sets the background color of the button. Here, we ha

How to Create Gradient Text with Tailwind CSS?

Gradient text adds visual appeal to user interfaces enhancing the design and attracting attention to important elements. we will learn how to create gradient text using Tailwind CSS in a React project. Gradient text can add a vibrant and visually appealing effect to your UI and make important headli

How to create text-reveal effect using HTML and CSS ?

Text-reveal is a type of effect in which all the alphabets of the text are revealed one by one in some animated way. There are uncountable ways to animate text for this effect. It is up to your creativity how you want the text to reveal. We will look at a basic and easy way to get started. Table of

How to Create a Gradient Shadow using CSS ?

A gradient shadow in CSS refers to creating a shadow effect that transitions smoothly from one color to another, using gradients. While the box-shadow property doesn't support gradients directly, you can simulate this effect by layering a semi-transparent gradient as the background or using pseudo-e

How to emphasize text in a document using HTML5 ?

In this article, we will emphasize the text in an HTML document by using the <em> element in the document. It is a phrase tag and used to emphasize the text content. Syntax: <em> Contents... </em> Example 1: html <!DOCTYPE html> <html> <head> <title> Emphasi

How to create Perspective Text using HTML & CSS ?

In this article, we are going to create an illusion of images below the main image. This is a simple article, we can achieve our target only by using HTML & CSS. Approach: Create a main div in which we have added a heading tag and then use the selectors in CSS to create the effects. HTML Code: F

How to create a table row using HTML?

Define a row in a table by using a <tr> tag in a document. This tag is used to define a row in an HTML table. The tr element contains multiple th or td elements. Syntax:<tr> ... </tr>Example: In this example, a table row in HTML5, utilizes the <tr> tag within the <tbody

How to use Linear Gradient in CSS?

The linear gradient in CSS is a type of gradient where colors transition in a straight line, either vertically, horizontally, or at any specified angle. The gradient in CSS can be often used to add smooth color transitions to the backgrounds, buttons, or other UI elements. Linear gradients can enhan