Gradients in HTML5

How to create the gradients in SVG using HTML5

Gradients

Gradients are used to create the colors between the shapes and it looks as some type of the graphics

There are two types of gradients they are

Linear gradient
Radial gradient

Linear gradient

It creates the linear transition of the color from one color to another color in one direction to other direction

To define linear gradients, we need to define

<linear gradient> - It defines the linear gradient tag to define the x and y values
(x1, y1, x2, y2) - It defines the x axis and y axis of the gradients colors
<stop off> set is used to define the colors in the linear gradients

 <h2 style="color:darkslateblue"><i>Linear Gradient</i></h2>
    <svg width="300" height="300" style="border:2px solid navy">
       <linearGradient id="grad6">
                <stop offset="5%" stop-color="blue" />
                <stop offset="70%" stop-color="red" />
            </linearGradient>

        <rect x="10" y="100" width="100" height="100" stroke="green" stroke-width="5"
              fill="url(#grad6)" />
         </svg>

In the above code snippet we have defined the linear gradient, The svg element with the width and height and border as 2px
The linear gradient with the id as grad6 and stop offset defines the left and right side of the colors in the given rectangle with the colors( blue, red)
rectangle element to define the (x, y, width, height) values , the stroke defines the color of the width with the green color and stroke width defines the width as 5, fill calls the the id with the id of "grad6"

output

Linear gradient with text

 <h1>Linear gradient with text</h1>
    <svg height="150" width="400" style="border:2px solid yellow">
            <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:green"/>
                <stop offset="100%" style="stop-color:magenta" />
            </linearGradient>
       
        <rect x="50" y="20" width="300" height="100" fill="url(#grad3)" />
        <text fill="violet  " font-size="20" font-style="italic" x="100" y="80">
            TechFunda
        </text>
    </svg>

Linear gradient with text

In the above code snippet we have defined the text inside the rectangle by using the element text
We have the svg element with the width, height and border values
The linear gradient is used to create the colors in linear with the values (x1, y1, x2, y2)
The stop offset is used to set the posistions of the left side and right colors of the rectangle
We are having the rect element to create the rectangle with width, height and id , in the rectangle fill = "url(grad6)" of the linear gradient

output

Radial Gradient

It is used to create the color in the circular shape

    <h3 style="color:darkmagenta"><i>Sample SVG Radial Gradient</i></h3>
    <svg width="300" height="300" style="border:1px dotted green">
       
            <radialGradient id="radial2">
                <stop offset="60%" stop-color="blue" />
                <stop offset="90%" stop-color="red" />
            </radialGradient>
       
            <rect x="50" y="60" width="200" height="200" stroke="green" stroke-width="3"
                  fill="url(#radial2)" />
    </svg>

Radial gradient

In the above code snippet we have defined the radial gradient which is used to create the circular shape , we have svg width and height as (300,300)

The radial gradient element which is used to create the circular shape with the stop offset vales which are used to set the circle in the rectangle

The rect element which is used to create the rectangle withe the (x, y width, height) values , with the fill id as radial2

output