SVG Tutorials

SVG Linear Gradient in HTML

SVG Linear Gradients in HTML



All SVG filters are defined by < defs > element. It is used for the definition of the filter which is to be used.

The < filter > element is used to define an SVG filter. The element has a required id attribute that identifies the filter.

A gradient is a smooth transition from one color to another. Moreover, we can apply several color transitions to the same element.

The < linearGradient > element is used to define a linear gradient. Like filters, it must also be nested in < defs > tag.


Code explanation of code below is as:-


  • The id attribute of the < linearGradient > tag defines a unique name for the gradient.
  • The x1, x2, y1,y2 attributes of the < linearGradient > tag define the starting and ending positions of the gradient.
  • Each color is specified with a < stop > tag. The offset attribute is used to define where the gradient color begins and ends.
  • The fill attribute links the ellipse element to the gradient


Observations are:-


  • Horizontal gradients are created when y1 and y2 are equal and x1 and x2 have different values.
  • Vertical gradients are created when x1 and x2 are equal and y1 and y2 have different values.
  • Angular gradients are created when x1 and x2 differ and y1 and y2 have different values.

Code Explanation

All Tutorials related to SVG Tutorials

All Sections related to SVG