Skip to main content

SVG Gradients

svg gradient are capable to fill multiple colors in single element.

Example 1

SVG Gradient Example
 <svg  height="170" width="240">
    <defs>
    <linearGradient id="colorFill" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(2251, 20, 55);stop-opacity:1" ></stop>
      <stop offset="100%"
      style="stop-color:rgb(228, 163, 224);stop-opacity:1" ></stop>
    </linearGradient>
  </defs>
    <circle cx="100" cy="80" r="50" fill="url(#colorFill)"></circle>
  </svg>

Example 2

SVG text gradients Example SVG SVG SVG SVG
  <svg  height="230" width="300">
    <defs>
    <linearGradient id="colorFill1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(20, 20, 55);stop-opacity:1" ></stop>
      <stop offset="100%"
      style="stop-color:rgb(228, 163, 224);stop-opacity:1" ></stop>
    </linearGradient>
       <linearGradient id="colorFill2" x1="0%" y1="0%" x2="100%"        y2="0%">
      <stop offset="20%"
      style="stop-color:rgb(55, 21, 64, 1);stop-opacity:1" ></stop>
      <stop offset="100%"
      style="stop-color:rgb(255, 44, 37);stop-opacity:1" ></stop>
    </linearGradient>
      <linearGradient id="colorFill3" x1="0%" y1="0%" x2="100%"        y2="0%">
      <stop offset="20%"
      style="stop-color:rgb(255, 105, 180);stop-opacity:1" ></stop>
      <stop offset="100%"
      style="stop-color:rgb(8, 8, 37);stop-opacity:1" ></stop>
    </linearGradient>
     <linearGradient id="colorFill4" x1="0%" y1="0%" x2="100%"        y2="0%">
      <stop offset="10%"
      style="stop-color:rgb(255, 105, 180);stop-opacity:1" ></stop>
        <stop offset="20%"
      style="stop-color:rgb(255, 105, 180);stop-opacity:1" ></stop>
        <stop offset="60%"
      style="stop-color:rgb(33, 150, 243);stop-opacity:1" ></stop>
      <stop offset="100%"
      style="stop-color:rgb(33, 150, 243)stop-opacity:1" ></stop>
    </linearGradient>
  </defs>
    <text x="10" y="50" font-size="45px" fill="url(#colorFill1)">SVG</text>
     <text x="10" y="100" font-size="45px" fill="url(#colorFill2)">SVG </text>
    <text x="10" y="150" font-size="45px" fill="url(#colorFill3)">SVG </text>
       <text x="10" y="200" font-size="45px" fill="url(#colorFill4)">SVG </text>
  </svg>




Comment

Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.

New Comment