<svg width="100%">
  <defs>
  <radialGradient id="gradient" cx="0%" cy="0%" r="100%" >
    <stop offset="0%" style="stop-color: red; " />
    <stop offset="50%" style="stop-color: yellow;" />
    <stop offset="100%" style="stop-color: green; " />
  </radialGradient>
    
    <radialGradient id="pad" xlink:href="#gradient" spreadMethod="pad" />
    <radialGradient id="repeat" xlink:href="#gradient" spreadMethod="repeat" />
    <radialGradient id="reflect" xlink:href="#gradient" spreadMethod="reflect" />
    
    </defs>
  
  <rect x="20" y="20" width='100' height='100' style="fill:url(#pad)"></rect>
  <rect x="140" y="20" width='100' height='100' style="fill:url(#repeat)">
  </rect>
  <rect x="260" y="20" width='100' height='100' style="fill:url(#reflect)"></rect>
  
</svg>