<linearGradient>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

Example

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

Usage context

CategoriesGradient element
Permitted contentAny number of the following elements, in any order:
Descriptive elements
<animate>, <animateTransform>, <script>, <set>, <stop>, <style>

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# LinearGradientElement

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
linearGradient
gradientTransform
gradientUnits
href
spreadMethod
x1
x2
xlink:href
Deprecated
y1
y2

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.