<linearGradient>
================

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

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 id="myGradient" 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>
```

Attributes
----------

`gradientUnits`

 This attribute defines the coordinate system for attributes `x1`, `x2`, `y1`, `y2`
*Value type*: `userSpaceOnUse`|`objectBoundingBox` ; *Default value*: `objectBoundingBox`; *Animatable*: **yes**

`gradientTransform`

 This attribute provides additional transformation 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-percentage>` | `<number>`; *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-percentage>` | `<number>`; *Default value*: `100%`; *Animatable*: **yes**

`xlink:href` 
Deprecated

 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-percentage>` | `<number>`; *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-percentage>` | `<number>`; *Default value*: `0%`; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class`, `style`
Event Attributes

Global event attributes, Document element event attributes

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `color-interpolation`, `color-rendering`, `cursor`, `display`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `pointer-events`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect`, `visibility`

XLink Attributes
`xlink:href` 
Deprecated
, `xlink:title`
Usage notes
-----------

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

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LinearGradients |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.