What do x1, y1, x2, y2 control in a linearGradient?

They define the gradient vector (direction). For example, x1="0%" y1="0%" x2="100%" y2="0%" creates a left-to-right gradient.

What does offset mean in a element?

offset sets the position of that colour stop along the gradient vector, usually in percentages like 0%, 50%, and 100%.

Can I use linear gradients for stroke instead of fill?

Yes. Use stroke="url(#gradientId)" on shapes like , , , etc., and set stroke-width as needed.

Why does my SVG gradient look different when resizing?

By default, gradients use objectBoundingBox units, so they scale with the object. If you need a fixed coordinate gradient, set gradientUnits="userSpaceOnUse" and use absolute x/y coordinates.

SVG Linear Gradients

Q: How do I apply a linear gradient in SVG?

Define a inside with an id, add elements, then apply it using fill="url(#id)" (or stroke="url(#id)").

Beginner

⏱️ 7 min read

📚 Updated: Aug 2025

🎯 2 Examples

Gradients

What You’ll Learn

How to create linear gradients in SVG to blend two or more colours along a straight line. Gradients add depth, polish, and visual hierarchy in icons, buttons, charts, and illustrations.

You’ll learn the syntax for <linearGradient> inside <defs>, how <stop> offsets work, how to control direction using x1, y1, x2, y2, and how to apply gradients to both fill and stroke.

⚡ Quick Reference — SVG Linear Gradient

Define <linearGradient>

Inside <defs> with an id

Stops <stop>

Use offset + stop-color

Apply url(#id)

Use in fill or stroke

Direction x1/y1 → x2/y2

Controls the gradient vector

Units gradientUnits

objectBoundingBox (default) or userSpaceOnUse

Basic Syntax

<svg>
  <defs>
    <linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#f97316" />
      <stop offset="100%" stop-color="#3b82f6" />
    </linearGradient>
  </defs>

  <rect fill="url(#g)" />
</svg>

👀 Live Preview — Gradient Directions

Linear gradients are defined by a direction vector. Here are a few common directions you can reuse.

Left → Right

Top → Bottom

Diagonal

Fill a Shape with a Linear Gradient

A classic use: fill a rectangle with a left-to-right gradient using two colour stops.

index.html

<svg width="300" height="200" viewBox="0 0 300 200">
  <defs>
    <linearGradient id="gradientID" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>

  <rect x="20" y="20" width="260" height="160" rx="18" fill="url(#gradientID)" />
</svg>

Try It Yourself

Gradient Stroke (Outline)

You can apply the same linear gradient to the stroke of a shape. This is great for badges and ring-style UI.

index.html

<svg width="240" height="160" viewBox="0 0 240 160">
  <defs>
    <linearGradient id="strokeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#22c55e" />
      <stop offset="50%" stop-color="#0ea5e9" />
      <stop offset="100%" stop-color="#a855f7" />
    </linearGradient>
  </defs>

  <circle cx="120" cy="80" r="48" fill="none" stroke="url(#strokeGrad)" stroke-width="10" />
</svg>

🧠 How It Works

Define the gradient in <defs>

Gradients should be defined inside <defs> so they can be reused across multiple shapes.

Define

Add colour stops

Each <stop> specifies a colour at a position using offset. Two stops are enough for most gradients.

Stops

Control direction with x1/y1/x2/y2

Think of the values as an arrow. Left-to-right is 0% 0% → 100% 0%. Top-to-bottom is 0% 0% → 0% 100%.

Direction

Apply via url(#id)

Use fill="url(#id)" to fill shapes or stroke="url(#id)" to paint outlines.

Apply

Smooth colour transitions

Linear gradients make SVG graphics feel more modern and dimensional while staying crisp at any scale.

💡 Best Practices

Do

Keep gradients subtle for UI (2–3 stops is usually enough)
Use consistent directions across icons in the same set
Use gradientUnits="userSpaceOnUse" when you need fixed coordinates
Use gradients on stroke for elegant outlines and rings
Name ids clearly (e.g. btnGrad, strokeGrad)

Don’t

Reuse the same gradient id across separate inline SVGs on one page
Overuse many stops unless you really need complex shading
Forget to define the gradient before referencing it in fill/stroke
Mix random colour palettes across related graphics
Assume gradients look identical on every display without checking

❓ Frequently Asked Questions

How do I apply a linear gradient in SVG?

Define a <linearGradient> inside <defs> with an id, add <stop> elements, then apply it using fill="url(#id)" (or stroke="url(#id)").

What do x1, y1, x2, y2 control?

They define the gradient direction. Left-to-right is x1="0%" y1="0%" x2="100%" y2="0%". Top-to-bottom is x1="0%" y1="0%" x2="0%" y2="100%".

What does offset mean in <stop>?

offset is the position of that stop along the gradient vector. Common values are 0%, 50%, and 100%.

Can I use linear gradients for strokes?

Yes. Use stroke="url(#gradientId)" and set a stroke-width. This is common for rings, outlines, and badges.

Why does my gradient change when resizing?

The default coordinate system is based on the object’s bounding box. If you need fixed coordinates, set gradientUnits="userSpaceOnUse" and use absolute values.

Make SVG Clickable

Next, learn how to turn SVG elements into links and build interactive SVG navigation.

SVG Links →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

4 people found this page helpful

SVG Line SVG Links