SVG Gradients

SVG gradients are used to fill a shape with a smooth transition between two or more colors, or between a color and transparency. There are two main types of gradients in SVG: linear gradients and radial gradients.

Linear gradients fill a shape with colors that transition along a straight line, while radial gradients fill a shape with colors that transition from the center to the edge in a circular pattern.

To define a linear gradient in SVG, you can use the <linearGradient> element and specify the start and end points of the gradient. You can also specify the colors and their positions along the gradient.

For example, the following code defines a linear gradient that starts at the top left corner of a shape and transitions to the bottom right corner:

<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%">
  <stop offset="0%" stop-color="red"/>
  <stop offset="100%" stop-color="blue"/>
</linearGradient>

To use this gradient to fill a shape, you can refer to it using the fill attribute:

<rect x="10" y="10" width="100" height="100" fill="url(#myGradient)"/>

Radial gradients are defined similarly, but you specify the center point of the gradient and its radius. Here's an example:

<radialGradient id="myGradient" cx="50%" cy="50%" r="50%">
  <stop offset="0%" stop-color="red"/>
  <stop offset="100%" stop-color="blue"/>
</radialGradient>

In this example, the radial gradient starts at the center of the shape and transitions to the edges, with the colors red and blue.

You can also apply transformations to gradients to achieve different effects, such as rotation, scaling, or skewing.

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

Example 1

 <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  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>

SVG Gradients

Example 1

Example 2

Comment

New Comment