<svg width="500" height="550" viewBox="0 0 500 550">
  <defs>
    <linearGradient id="lin_gradient_offset_100">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
    <linearGradient id="lin_gradient_offset_50">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="blue" />
    </linearGradient>
    <linearGradient id="lin_gradient_three_stops">
      <stop offset="00%" stop-color="red" />
      <stop offset="50%" stop-color="gold" />
      <stop offset="100%" stop-color="green" />
    </linearGradient>
    <linearGradient id="lin_gradient_diagonal_1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
    <linearGradient id="lin_gradient_diagonal_2" x1="100%" y1="20%" x2="0%" y2="80%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="500" height="100" fill="url(#lin_gradient_offset_100)" stroke="white" stroke-width="10" />
  <rect x="0" y="100" width="500" height="100" fill="url(#lin_gradient_offset_50)" stroke="white" stroke-width="10" />
  <rect x="0" y="200" width="500" height="100" fill="url(#lin_gradient_three_stops)" stroke="white" stroke-width="10" />
  <rect x="0" y="300" width="250" height="250" fill="url(#lin_gradient_diagonal_1)" stroke="white" stroke-width="10" />
  <rect x="250" y="300" width="250" height="250" fill="url(#lin_gradient_diagonal_2)" stroke="white" stroke-width="10" />
</svg>