What do the x1, y1, x2, y2 attributes on a define?

The start and end points of the line along which colors transition

The bounding box that clips the gradient's visible area

The radius and center point of the gradient's origin

What does the 'offset' attribute on a element represent?

The position along the gradient, from 0 to 1 (or 0% to 100%), where that color occurs

The opacity level of that particular color stop

The pixel distance the gradient shifts away from the shape's edge

With the default gradientUnits='objectBoundingBox', what do coordinates like x1='0' and x2='1' mean?

They are fractional positions, 0 to 1, relative to the shape's own bounding box

They are absolute pixel coordinates in the SVG's user coordinate system

They are percentages of the entire SVG viewport rather than the shape

What does spreadMethod='reflect' do on a linear gradient?

Mirrors the gradient back and forth repeatedly beyond its defined stops

Pads the area beyond the last stop with that stop's solid color

Makes the region beyond the gradient fully transparent

How can one reuse the color stops already defined in another gradient element?

Reference the other gradient's id using the href (or xlink:href) attribute

Copy the elements manually; gradients cannot reference one another

Nest the second inside the first as a child element

SVG Linear Gradient

A linear gradient paints a shape with colors that blend smoothly along a straight line, and x1/y1/x2/y2 let you point that line in any direction.

Defining a Linear Gradient

A gradient is defined once, inside <defs>, as a <linearGradient> element with its own id. It doesn't draw anything by itself - it's a paint server that a shape references later through fill="url(#id)" or stroke="url(#id)", the same way a filter is referenced. Inside the <linearGradient>, one or more <stop> elements describe the actual colors.

Color Stops

Each <stop> needs an offset between 0 and 1 (or a percentage such as "50%") and a stop-color. Stops must be listed in ascending offset order, since the browser blends smoothly between each consecutive pair. A stop-opacity attribute can also fade a stop toward transparency, which is the standard way to fade a gradient into whatever sits underneath instead of into a solid color.

Example

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 120' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <linearGradient id='basicFade'>
      <stop offset='0%' stop-color='#ff7e5f'/>
      <stop offset='100%' stop-color='#feb47b'/>
    </linearGradient>
  </defs>
  <rect x='20' y='20' width='160' height='80' fill='url(#basicFade)'/>
</svg>

</body>
</html>

Controlling Direction with x1, y1, x2, y2

By default a linear gradient runs left to right, equivalent to x1="0%" y1="0%" x2="100%" y2="0%". These four coordinates describe the gradient vector: the first color stop sits at (x1,y1) and the last sits at (x2,y2), with stops in between placed proportionally along that line. Because the default gradientUnits value is objectBoundingBox, these numbers are normally fractions (0 to 1) of the shape's own bounding box, so the same percentages reorient correctly no matter how large or small the shape is. Setting y2 instead of x2 produces a vertical gradient, and setting both produces a diagonal one.

Example

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <linearGradient id='diagonalFade' x1='0%' y1='0%' x2='100%' y2='100%'>
      <stop offset='0%' stop-color='#4facfe'/>
      <stop offset='100%' stop-color='#00f2fe'/>
    </linearGradient>
  </defs>
  <circle cx='100' cy='100' r='80' fill='url(#diagonalFade)'/>
</svg>

</body>
</html>

Switching gradientUnits to userSpaceOnUse changes x1/y1/x2/y2 into absolute coordinates in the SVG's own coordinate system instead of fractions of the shape - useful when several differently sized shapes should share one continuous gradient line, such as a gradient sweeping across an entire scene.

Example

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 300 150' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <linearGradient id='sunset' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='150'>
      <stop offset='0%' stop-color='#1e3c72'/>
      <stop offset='55%' stop-color='#e8734a'/>
      <stop offset='100%' stop-color='#ffd27a'/>
    </linearGradient>
  </defs>
  <rect x='0' y='0' width='300' height='150' fill='url(#sunset)'/>
</svg>

</body>
</html>

Reference the same gradient id on many shapes to keep a palette consistent across a whole illustration.
Add a stop-opacity of 0 on the last stop to fade a gradient into whatever is behind it, instead of into a flat color.
Use spreadMethod="reflect" or "repeat" to control what happens beyond x2/y2, instead of the default pad, which just extends the end colors.
Gradients can fill strokes too, not just fills - set stroke="url(#id)" on any shape.

Note: Stops don't have to be evenly spaced. Bunching three or four stops close together near one end creates a sharper color transition, while spreading them out creates a slower blend.

Note: objectBoundingBox (the default gradientUnits) breaks down for shapes with a zero-height or zero-width bounding box, such as a perfectly horizontal or vertical line. Switch to userSpaceOnUse with explicit coordinates for those cases.

Attribute	Purpose
x1 / y1	Start point of the gradient vector, where the first stop is anchored
x2 / y2	End point of the gradient vector, where the last stop is anchored
gradientUnits	objectBoundingBox (fractions of the shape, default) or userSpaceOnUse (absolute coordinates)
spreadMethod	How the gradient behaves beyond its vector: pad (default), reflect, or repeat
offset	Position of a <stop> along the gradient, from 0 to 1 or as a percentage
stop-color / stop-opacity	The color and transparency at a given stop

Exercise: SVG Linear Gradient

What do the x1, y1, x2, y2 attributes on a <linearGradient> define?

Keep Going

SVG Interview QuestionsPractice real questions asked for SVG Frontend Developer SalarySee what Frontend Developer roles pay in the market Auto Apply for JobsApply to open roles related to SVG and tweak your resume