<linearGradient>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

* Some parts of this feature may have varying levels of support.

The<linearGradient>SVG element lets authors define linear gradients to apply to other SVG elements.

Usage context

Categories	Gradient element
Permitted content	Any number of the following elements, in any order: Descriptive elements `<animate>`,`<animateTransform>`,`<discard>`,`<script>`,`<set>`,`<stop>`,`<style>`

Attributes

gradientUnits: This attribute defines the coordinate system for attributesx1,x2,y1,y2Value type:userSpaceOnUse |objectBoundingBox;Default value:objectBoundingBox;Animatable:yes
gradientTransform: This attribute provides additionaltransformation to the gradient coordinate system.Value type:<transform-list>;Default value:identity transform;Animatable:yes
href: This attribute defines a reference to another<linearGradient> element that will be used as a template.Value type:<URL>;Default value: none;Animatable:yes
spreadMethod: This attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient.Value type:pad |reflect |repeat;Default value:pad;Animatable:yes
x1: This attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn.Value type:<length>;Default value:0%;Animatable:yes
x2: This attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn.Value type:<length>;Default value:100%;Animatable:yes
xlink:hrefDeprecated: An <IRI> reference to another<linearGradient> element that will be used as a template.Value type:<IRI>;Default value: none;Animatable:yes
y1: This attribute defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn.Value type:<length>;Default value:0%;Animatable:yes
y2: This attribute defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn.Value type:<length>;Default value:0%;Animatable:yes

DOM Interface

This element implements theSVGLinearGradientElement interface.

Example

html,body,svg {  height: 100%;}

html

<svg  viewBox="0 0 10 10"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">  <defs>    <linearGradient gradientTransform="rotate(90)">      <stop offset="5%" stop-color="gold" />      <stop offset="95%" stop-color="red" />    </linearGradient>  </defs>  <!-- using my linear gradient -->  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" /></svg>