<svg width="100%" height='500px'>
  <linearGradient id="gradient" x1='20%' y1='30%' x2='40%' y2='80%'>
    <stop offset="0%" style="stop-color: red; " />
    <stop offset="50%" style="stop-color: yellow;" />
    <stop offset="100%" style="stop-color: green; " />
  </linearGradient>
  
  <linearGradient id="pad" xlink:href="#gradient" spreadMethod="pad" />
  
  <linearGradient id="repeat" xlink:href="#gradient" spreadMethod="repeat" />
  
  <linearGradient id="reflect" xlink:href="#gradient" spreadMethod="reflect" />
  
  <rect x="20" y="20" width="200" height="200" style="fill: url(#pad)" />
  <rect x="240" y="20" width="200" height="200" style="fill: url(#repeat)" />
  <rect x="460" y="20" width="200" height="200" style="fill: url(#reflect)" />

</svg>