Gradients

Code

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120">
  <defs>
    <linearGradient id="lg" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff0000"/>
      <stop offset="100%" stop-color="#0000ff"/>
    </linearGradient>
    <radialGradient id="rg" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#000000"/>
    </radialGradient>
  </defs>
  <rect x="10" y="10" width="80" height="80" fill="url(#lg)"/>
  <circle cx="150" cy="50" r="40" fill="url(#rg)"/>
</svg>

Explanation

Gradients are defined once inside defs and referenced by url(#id) from a fill or stroke attribute. A linearGradient blends along a line defined by x1/y1 to x2/y2, while a radialGradient blends outward from a center point. Each stop element sets a color and offset position along the blend.

More SVG Snippets