<linearGradient>

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

Usage context

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

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 the SVGLinearGradientElement interface.

Example

Basic linear gradient

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

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

Repeating angled gradient

In this example, the two <rect> elements have different aspect ratios, but the angle of the gradient is the same.

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

<svg
  viewBox="0 0 500 500"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient
      id="grad"
      x1="0"
      y1="0"
      x2="20"
      y2="20"
      spreadMethod="repeat"
      gradientUnits="userSpaceOnUse">
      <stop offset="50%" stop-color="red" />
      <stop offset="50%" stop-color="gold" />
    </linearGradient>
  </defs>
  <rect width="100%" height="25%" fill="url(#grad)" />
  <rect width="100%" height="65%" fill="url(#grad)" y="30%" />
</svg>

Specifications

• Scalable Vector Graphics (SVG) 2