SVG Linear Gradients

Beginner
⏱️ 10 min read
📚 Updated: Aug 2026
🎯 5 Examples
🚀 5 Try-it labs
Styling & Effects
SVG linear gradients tutorial illustration showing smooth colour transitions
Overview

What You’ll Learn

SVG <linearGradient> blends colours along a straight vector. This tutorial covers defining gradients in <defs>, <stop> offsets, direction with x1/y1/x2/y2, applying paint with url(#id), five worked examples, and how linear gradients compare to radial ones and patterns.

<linearGradient>

Core element

Define reusable paint inside <defs> with a unique id.

<stop>

Colour stops

Set offset, stop-color, and optional stop-opacity.

Direction

x1 y1 → x2 y2

The gradient vector controls left-right, top-bottom, or diagonal blends.

url(#id)

Apply paint

Use fill or stroke with url(#yourId) on any shape.

gradientUnits

Coordinate space

objectBoundingBox (default) or userSpaceOnUse for fixed coords.

Stroke Gradients

Outlines & rings

Paint strokes with the same gradient for badges and UI rings.

Introduction

SVG linear gradients blend two or more colours along a straight line. They add depth and polish to icons, buttons, charts, and illustrations — all while staying crisp as vectors.

You define a <linearGradient> once (usually in <defs>), list colour <stop>s, then reference it with url(#id) on fill or stroke.

Why it matters?

Raster gradient images blur when scaled. SVG gradients stay sharp, stay tiny in markup, and can be shared across many shapes with one definition.

Key Highlights

Reusable Paint

One gradient id can fill or stroke many shapes.

Direction Vector

x1/y1 to x2/y2 set left-right, top-bottom, or diagonal.

Colour Stops

Two stops for simple blends; add more for multi-colour ramps.

Fill or Stroke

Same paint works for solid fills and outlined rings.

In short: define stops along a direction vector, then paint shapes with url(#id).

Foundation

📝 Syntax

Basic form of an SVG linear gradient:

index.html
<svg width="300" height="120">
  <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 x="20" y="30" width="260" height="60" rx="12" fill="url(#g)" />
</svg>

Elements & Attributes

NameTypeDescription
<linearGradient>ElementDefines a linear colour blend; place inside <defs> with an id.
x1, y1Length / %Start of the gradient vector.
x2, y2Length / %End of the gradient vector (direction).
<stop>ElementA colour at a position along the vector.
offset% / numberStop position, e.g. 0%, 50%, 100%.
stop-colorColourColour at that stop.
stop-opacity0–1Optional transparency of the stop.
gradientUnitsKeywordobjectBoundingBox (default) or userSpaceOnUse.

Common directions

EffectVectorNotes
Left → Rightx1="0%" y1="0%" x2="100%" y2="0%"Most common UI bar fill
Top → Bottomx1="0%" y1="0%" x2="0%" y2="100%"Vertical blends and fades
Diagonalx1="0%" y1="0%" x2="100%" y2="100%"Corner-to-corner polish

Minimal workflow

index.html
<!-- 1. Define -->
<defs>
  <linearGradient id="btnGrad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#f97316" />
    <stop offset="100%" stop-color="#3b82f6" />
  </linearGradient>
</defs>

<!-- 2. Apply -->
<rect fill="url(#btnGrad)" />
Cheat Sheet

⚡ Quick Reference

GoalCode
Define gradient<linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="0%">...</linearGradient>
Two colour stops<stop offset="0%" stop-color="red" /> + 100% stop
Fill a shapefill="url(#g)"
Stroke a shapestroke="url(#g)" stroke-width="8"
Fade outstop-opacity="0" on the end stop
Fixed coordinatesgradientUnits="userSpaceOnUse"
Compare

📋 Linear vs Radial vs Pattern vs Solid Fill

All paint SVG shapes — pick the paint that matches the look you want.

Linear
straight blend

Colours along a vector — UI bars & buttons

Radial
centre-out

Highlights, glows, and orbs

Pattern
repeating tile

Textures, grids, and motifs

Solid
one colour

Simplest fill when no blend is needed

Context

When to Use Linear Gradients

Reach for <linearGradient> when colour should travel in a clear direction.

  1. Buttons & bars

    Primary CTAs, progress bars, and pill fills with subtle depth.

  2. Icons & badges

    Brand accents and outlined rings with gradient strokes.

  3. Charts & data viz

    Series fills, heat scales, and axis emphasis.

  4. Background panels

    Hero shapes and card headers that stay resolution-independent.

  5. Not for centre glows

    For centre-out highlights, use radial gradients instead.

Key benefit: one definition, many shapes — crisp colour blends at every scale.

Hands-On

Examples Gallery

Five starter snippets using <linearGradient>. Click View Output for a preview, or Try It Yourself to edit live.

📚 Getting Started

Define a gradient, fill a shape, then change the direction.

Example 1 — Fill a Shape with a Linear Gradient

A classic left-to-right fill using two colour stops on a rounded rectangle.

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

How It Works

The gradient lives in <defs>. fill="url(#gradientID)" paints the rectangle with that reusable paint.

Example 2 — Left-Right, Top-Bottom & Diagonal

Change only x1/y1/x2/y2 to rotate the blend direction.

index.html
<svg width="320" height="200" viewBox="0 0 320 200">
  <defs>
    <linearGradient id="lr" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ef4444" />
      <stop offset="100%" stop-color="#3b82f6" />
    </linearGradient>
    <linearGradient id="tb" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#22c55e" />
      <stop offset="100%" stop-color="#0ea5e9" />
    </linearGradient>
    <linearGradient id="diag" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#a855f7" />
      <stop offset="100%" stop-color="#f97316" />
    </linearGradient>
  </defs>
  <rect x="10" y="20" width="90" height="160" rx="12" fill="url(#lr)" />
  <rect x="115" y="20" width="90" height="160" rx="12" fill="url(#tb)" />
  <rect x="220" y="20" width="90" height="160" rx="12" fill="url(#diag)" />
</svg>
Try It Yourself

How It Works

Think of x1,y1 → x2,y2 as an arrow. Horizontal, vertical, and diagonal arrows produce the three common UI directions.

📈 Practical Patterns

Multi-stop ramps, gradient strokes, and soft fades.

Example 3 — Multi-Stop Colour Ramp

Add a middle stop for richer blends — great for brand and chart scales.

index.html
<svg width="300" height="100" viewBox="0 0 300 100">
  <defs>
    <linearGradient id="ramp" 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>
  <rect x="20" y="25" width="260" height="50" rx="14" fill="url(#ramp)" />
</svg>
Try It Yourself

How It Works

Each <stop> places a colour at an offset. Two stops are enough for most UI; three or more create richer ramps.

Example 4 — Gradient Stroke (Outline)

Apply the same linear gradient to a circle’s stroke for badge and ring 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>
Try It Yourself

How It Works

stroke="url(#strokeGrad)" paints the outline. Use fill="none" when you only want the ring.

Example 5 — Soft Fade with stop-opacity

Fade a fill into transparency for soft edges and overlay effects.

index.html
<svg width="300" height="140" viewBox="0 0 300 140">
  <defs>
    <linearGradient id="fade" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#2563eb" stop-opacity="1" />
      <stop offset="100%" stop-color="#2563eb" stop-opacity="0" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="300" height="140" fill="#e2e8f0" />
  <rect x="20" y="30" width="260" height="80" rx="12" fill="url(#fade)" />
</svg>
Try It Yourself

How It Works

Same stop-color with falling stop-opacity creates a soft dissolve — useful for vignettes and overlays.

Use Cases

Real-world places where SVG linear gradients show up every day.

1. UI Buttons

Subtle fills that feel more dimensional than flat colour.

Example: primary CTA with brand-to-accent blend.

2. Progress Bars

Track fills that read as energy or completion.

Example: green-to-cyan upload meter.

3. Badge Rings

Gradient strokes on circles for status and awards.

Example: multi-colour outline around an avatar.

4. Charts

Series fills and heat-style colour scales.

Example: area chart fill fading toward the baseline.

5. Brand Icons

Consistent directional accents across an icon set.

Example: shared diagonal gradient on logo marks.

6. Card Headers

Panel tops and hero shapes without exporting PNGs.

Example: soft left-to-right header strip.

Pro Tip: keep gradient ids unique per inline SVG on a page — duplicate ids can make the wrong paint apply.

Advantages

Why paint with SVG gradients instead of raster images or CSS alone.

  1. 1. Resolution Independent

    Stays sharp on retina screens without extra assets.

  2. 2. Tiny & Reusable

    One definition paints many shapes via url(#id).

  3. 3. Precise Direction

    Exact vectors for horizontal, vertical, or diagonal blends.

  4. 4. Works on Strokes

    Outline rings and badges with the same paint system.

  5. 5. Easy to Theme

    Swap stop colours or animate offsets without new image files.

Pro Tip: for UI, two close tones often look more premium than a rainbow of stops.

Usage Tips

Follow these practices for clean, scalable SVG gradients.

  1. 1. Define Before You Reference

    Put gradients in <defs> (or earlier in the SVG) before url(#id).

  2. 2. Use Clear Ids

    Names like btnGrad or strokeGrad are easier to maintain.

  3. 3. Prefer 2–3 Stops for UI

    Extra stops are fine for charts; keep UI fills restrained.

  4. 4. Keep Directions Consistent

    Match gradient vectors across an icon set for a cohesive look.

  5. 5. Know Your Units

    Default objectBoundingBox scales with the shape; use userSpaceOnUse for fixed coords.

Pro Tip: percentage vectors (0%–100%) are easiest when you stay on the default bounding-box units.

Common Pitfalls

Avoid these mistakes when your gradient refuses to show up.

  1. 1. Wrong or Missing Id

    fill="url(#missing)" paints nothing useful.

    → Match the id on <linearGradient> exactly.

  2. 2. Duplicate Ids Across Inline SVGs

    Multiple SVGs on one page sharing the same id can collide.

    → Give each gradient a unique id per document.

  3. 3. Zero-Length Vector

    If start and end points are identical, the blend collapses.

    → Ensure x1,y1 and x2,y2 differ.

  4. 4. Confusing Units

    Percentages behave differently under userSpaceOnUse.

    → Stick to default units until you need fixed coordinates.

  5. 5. Expecting CSS Gradient Syntax

    SVG uses <stop> elements, not CSS linear-gradient() strings inside attributes.

    → Define SVG gradients with elements, then reference via url(#id).

Pro Tip: if a fill is blank, check the id spelling, that stops exist, and that the gradient is defined in the same SVG document.

🧠 How a Linear Gradient Is Applied

1

Define the gradient in <defs>

Gradients should live in <defs> so they can be reused across multiple shapes.

Define
2

Add colour stops

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

Stops
3

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
4

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.

Important Notes

  • Define gradients in <defs> and reference them with url(#id).
  • x1/y1/x2/y2 set the blend direction.
  • offset + stop-color (and optional stop-opacity) build the ramp.
  • Works for both fill and stroke.
  • Default units are objectBoundingBox — gradients scale with the shape.
  • Need a centre glow? Use radial gradients.

Quick Takeaway: define stops along a vector, give the gradient an id, paint with url(#id). Keep ids unique on the page.

Compatibility

Browser Support

SVG <linearGradient> is supported in all modern browsers — and has been for many years — as part of SVG 1.1 paint servers.

✓ SVG 1.1+

SVG &lt;linearGradient&gt;

Use linear gradients in inline SVG or external .svg files. Stops, direction vectors, and url(#id) paints work consistently across Chrome, Firefox, Safari, Edge, and mobile browsers.

100% Modern browsers
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
<linearGradient> Universal

Bottom line: Safe for production sites. Prefer inline SVG or cached .svg assets; no polyfill is required for current browsers.

Wrap Up

🎉 Conclusion

SVG linear gradients are reusable paint: define <linearGradient> with colour stops, set the direction vector, then apply with fill or stroke via url(#id).

Practice the five examples above, then continue to SVG Radial Gradients when colour should radiate from a centre point.

Keep ids unique, prefer 2–3 stops for UI, and use consistent directions across an icon set.

View Examples Gallery Continue to Radial Gradients
Pro Tips

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

Key Takeaways

Knowledge Unlocked

Five things to remember about SVG linear gradients

Paint shapes with directional colour blends.

5
Core concepts
▶ 01

<linearGradient>

Reusable paint in defs

API
● 02

Stops

offset + stop-color

Colour
➜ 03

Direction

x1,y1 → x2,y2

Vector
🔗 04

url(#id)

fill or stroke

Apply
🗺 05

Units

bbox vs user space

Coords
🎯 You’re ready to paint with SVG linear gradients
Review Quick Reference →

❓ Frequently Asked Questions

Define a <linearGradient> inside <defs> with an id, add <stop> elements, then apply it using fill="url(#id)" (or stroke="url(#id)").
They define the gradient vector (direction). For example, x1="0%" y1="0%" x2="100%" y2="0%" creates a left-to-right gradient.
offset sets the position of that colour stop along the gradient vector, usually in percentages like 0%, 50%, and 100%.
Yes. Use stroke="url(#gradientId)" on shapes like <path>, <line>, <circle>, etc., and set stroke-width as needed.
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.
Use linear gradients for directional blends (UI bars, buttons, axes). Use radial gradients when colour should radiate from a centre point (highlights, glows, orbs).

Did you Know? 🔊

An SVG <linearGradient> is reusable paint — define it once in <defs> with an id, then apply it with fill="url(#id)" or stroke="url(#id)". You can also animate stop-color or the gradient vector with CSS or SMIL for living brand accents.

Continue to SVG Radial Gradients

Learn centre-out colour blends for highlights, glows, and orbs.

Radial Gradients tutorial →

About the author

Mari Selvan M P
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)

8 people found this page helpful

SVG Patterns SVG Radial Gradients