Introduction

In this article, we will discuss the SVG Gradients in HTML5. Gradients are a way of filling shapes with color, in an uneven fashion and they consist of continuously smooth color transitions along a vector from one color to another and we can apply several color transitions to the element.
There are basically two types of SVG Gradients in HTML5:
We will talk about both of these gradients in the following sections.

SVG Linear Gradient

The <linearGradient> element is used to define a linear gradient. Linear gradients change evenly from one color to another, in a linear fashion. The <linearGradient> element must be nested within a <defs> tag. The color can change either vertically, horizontally, or along a vector you define.
Example - 1
Fill a rectangle with a Horizontally Linear Gradient:
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1"
  6. xmlns="http://www.w3.org/2000/svg">
  7. <defs>
  8. <linearGradient id="LinerGradient">
  9. <stop offset="10%" stop-color="#F60" stop-opacity="0.9" />
  10. <stop offset="35%" stop-color="#FF6" />
  11. <stop offset="70%" stop-color="#cc0000" stop-opacity="1"/>
  12. <stop offset="90%" stop-color="#000099" stop-opacity="0.7"/>
  13. </linearGradient>
  14. </defs>
  15. <rect stroke="black" stroke-width="5" x="10" y="10" width="800" height="500" fill="url(#LinearGradient)" />
  16. </svg>
  17. </body>
  18. </html>
Output:
image 1.jpg
Example - 2 Filling an ellipse with a Vertically Linear Gradient:
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  6. <defs>
  7. <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
  8. <stop offset="10%" style="stop-color:#ff0000;stop-opacity:1" />
  9. <stop offset="40%" style="stop-color:#ffff00;stop-opacity:1" />
  10. <stop offset="60%" style="stop-color:#009632;stop-opacity:1" />
  11. <stop offset="90%" style="stop-color:#00ffff;stop-opacity:1" />
  12. </linearGradient>
  13. </defs>
  14. <ellipse cx="200" cy="70" rx="100" ry="65" fill="url(#grad2)" />
  15. </svg>
  16. </body>
  17. </html>
Output:
image 2.jpg

SVG Radial Gradient

Radial gradients are gradients in which the colors change circularly rather than linearly. The <radialGradient> element is used to define a radial gradient. The <radialGradient> element must be nested within a <defs> tag.
Example - 1 Rectangle With Radial Gradient:
  1. <html>
  2. <head>
  3. </head>
  4. </body>
  5. <svg width="10cm" height="10cm" viewBox="0 0 800 400" version="1.1"
  6. xmlns="http://www.w3.org/2000/svg">
  7. <defs>
  8. <radialGradient id="MG" gradientUnits="userSpaceOnUse" cx="400" cy="200" r="250" fx="400" fy="500">
  9. <stop offset="15%" stop-color="orange" />
  10. <stop offset="40%" stop-color="blue" />
  11. <stop offset="70%" stop-color="pink" />
  12. <stop offset="90%" stop-color="green" />
  13. </radialGradient>
  14. </defs>
  15. <rect fill="url(#MG)" stroke="black" stroke-width="5" x="100" y="100" width="600" height="400"/>
  16. </svg>
  17. </body>
  18. </html>
Output:
image 3.jpg
Example - 2 Ellipse with a radial gradient:
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  6. <defs>
  7. <radialGradient id="RadialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
  8. <stop offset="25%" style="stop-color:#19ff00;stop-opacity:0.6" />
  9. <stop offset="55%" style="stop-color:#b400ff;stop-opacity:1.9" />
  10. <stop offset="90%" style="stop-color:#00b4ff;stop-opacity:1" />
  11. </radialGradient>
  12. </defs>
  13. <ellipse cx="200" cy="80" rx="100" ry="70" fill="url(#RadialGradient)" />
  14. <text fill="#ffffff" font-size="30" font-family="Monotype Corsiva" x="157" y="86">
  15. Gaurav</text>
  16. </svg>
  17. </body>
  18. </html>
Output:
image 4.jpg