<svg width="250" height="150" viewBox="0 0 250 150"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="two_hues">
      <stop offset="0%" style="stop-color: #ffcc00;"/>
      <stop offset="100%" style="stop-color: #0099cc;"/>
    </linearGradient>
  </defs>

  <rect x="20" y="20" width="200" height="100"
    style="fill: url(#two_hues);  stroke: black;"/>
</svg>


  
Edit the preceding SVG by changing the stop colors and the offsets to see what it does.
    (You’ll learn more about the offsets later.)





  
  
   Zoom