SVG Linear

Description of SVG gradients

A gradient is a fluid transition from one color to another. It is possible to apply multiple color transitions to the same element.

There exist two main kinds of gradients in SVG:

linear
radial

The <linearGradient> element

The <linearGradient>> element specifies linear gradients that fill graphical elements. It should be nested inside of a <defs> tag that contains definition of particular elements, like gradients.

Linear gradients can be horizontal, vertical, or angular:

Horizontal gradients - y1 and y2 are equal, and x1 and x2 differ.
Vertical gradients - x1 and x2 are equal, and y1 and y2 differ.
Angular gradients - x1 and x2 vary, and y1 and y2 differ, too.

Never confuse an SVG linear gradient with the CSS radial-gradient property. CSS gradients apply to HTML elements, while the SVG gradients apply to SVG elements.

Example of the <linear> element to create an ellipse with a horizontal linear gradient:

<!DOCTYPE html>
<html>
  <body>
    <svg height="200" width="300">
      <defs>
        <linearGradient id="ellipse" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="150" cy="90" rx="105" ry="65" fill="url(#ellipse)" />
    </svg>
  </body>
</html>

Try it Yourself »

Example of the <linear> element to create an ellipse with a vertical linear gradient:

<!DOCTYPE html>
<html>
  <body>
    <svg height="300" width="400">
      <defs>
        <linearGradient id="ellipse" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="250" cy="100" rx="110" ry="70" fill="url(#ellipse)" />
    </svg>
  </body>
</html>

Try it Yourself »

Attributes

Value	Description
gradientunits	This attribute specifies the coordinate system for attributes x1, x2, y1, y2.
gradienttransform	This attribute gives extra transformation to the gradient coordinate system.
href	This attribute specifies a reference to another <linearGradient> element.
spreadmethod	This attribute specifies how the gradient behaves if it starts or ends within the bounds of the shape that contains the gradient.
x1	This attribute specifies the x coordinate of the beginning point of the vector gradient along which the linear gradient is being drawn.
x2	This attribute specifies the y coordinate of the ending point of the vector gradient along which the linear gradient is being drawn.
y1	This attribute specifies the y coordinate of the beginning point of the vector gradient along which the linear gradient is drawn.
y2	This attribute specifies the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn.

The SVG <linear> element also supports the Global Attributes and Event Attributes.

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

HTML Basics