Try it Live - HTML5 SVG Linear Gradient

​x
 
<!DOCTYPE html>
<html>
  <body>
    <h2>Example of SVG Linear Gradient </h2>
    <h3>stop-offset defines the position of color starts and stop-color defines combination of colors</h3>
    <svg height="250" width="300" >
      <defs>
        <linearGradient id="gradval" x1="0%" y1="0" x2="0%" y2="100%">
          <stop offset="25%"  stop-color="cyan" stop-opacity="0.5"/>
          <stop offset="75%" stop-color="dodgerblue" />
        </linearGradient>
      </defs>
      <rect x="50" y="20" width="200" height="200" rx="30" fill="url(#gradval)"/>
    </svg>
    
    <hr>
    
    <h2>Example of SVG Radial Gradient </h2>
    <svg height="300" width="300" >
      <defs>
        <radialGradient id="gradval1" x1="0%" y1="0" x2="0%" y2="100%">
          <stop offset="25%"  stop-color="black" />
          <stop offset="75%" stop-color="hotpink" />
        </radialGradient>
      </defs>
      <rect x="50" y="20" width="200" height="200" rx="30" fill="url(#gradval1)"/>
    </svg>
  </body>
</html>
​