SVG Recipe

Gradients and Patterns / linearGradient

Last modified:

2 stop elements


<svg width="200" height="124" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#006363" />
      <stop offset="100%" stop-color="#33CCCC" />
    </linearGradient>
  </defs>
  <rect x="10" y="7" width="180" height="111" fill="url(#g1)"/>
</svg>


4 stop elements


<svg width="200" height="124" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#33CCCC" />
      <stop offset="10%" stop-color="#009999" />
      <stop offset="90%" stop-color="#009999" />
      <stop offset="100%" stop-color="#006363" />
    </linearGradient>
  </defs>
  <rect x="10" y="7" width="180" height="111" fill="url(#g2)"/>
</svg>


text

Linear Gradient !!! Linear Gradient !!! 

<svg width="100%" height="124" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="g31" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="45%" stop-color="#CB0077"/>
      <stop offset="50%" stop-color="#F577C1"/>
      <stop offset="55%" stop-color="#CB0077"/>
      <stop offset="100%" stop-color="#84004D"/>
    </linearGradient>
    <linearGradient id="g32" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop offset="0%" stop-color="#CB0077" stop-opacity="0.5"/>
      <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
    </linearGradient>
  </defs>
  <g font-family="'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif" font-size="80">
    <text x="10" y="83" fill="url(#g31)">Linear Gradient !!!</text>
    <text x="0" y="0" fill="url(#g32)" transform="matrix(1 0 -0.5 -0.3 10 88)">Linear Gradient !!!</text>
  </g>
</svg>