W3cubDocs

/SVG

<linearGradient>

The <linearGradient> element lets authors define linear gradients that can be applied to fill or stroke of graphical elements.

Don't be confused with CSS linear-gradient() as CSS gradients can only apply to HTML elements where SVG gradient can only apply to SVG elements.

<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 since SVG 2
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

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

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, 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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
linearGradient 1 12 1.5 9 9 3.1
gradientTransform ? ? ? ? ? ?
gradientUnits ? ? ? ? ? ?
spreadMethod ? ? ? ? ? ?
x1 ? ? ? ? ? ?
x2 ? ? ? ? ? ?
xlink:href ? ? ? ? ? ?
y1 ? ? ? ? ? ?
y2 ? ? ? ? ? ?
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
linearGradient 3 18 4 Yes 3.1 1.0
gradientTransform ? ? ? ? ? ?
gradientUnits ? ? ? ? ? ?
spreadMethod ? ? ? ? ? ?
x1 ? ? ? ? ? ?
x2 ? ? ? ? ? ?
xlink:href ? ? ? ? ? ?
y1 ? ? ? ? ? ?
y2 ? ? ? ? ? ?

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient