Chapter 22: SVG Linear Gradients

SVG: Linear Gradients!

Imagine we’re sitting together with the code editor open, and I’m your patient teacher who’s going to explain everything about <linearGradient> step by step — slowly, clearly, with lots of copy-paste examples you can try right now.

What is a Linear Gradient in SVG?

A linear gradient is a smooth color transition that flows in a straight line across a shape.

• Instead of one solid color (fill=”blue”), the fill changes gradually from one color to another (or many colors).
• The transition happens along an invisible gradient line (called the gradient vector).
• You define this once in <defs>, give it an id, and then many shapes can reuse it with fill=”url(#myGradient)”.

This is perfect for:

• Buttons with shine/reflection
• Backgrounds (sky, sunset, metal, glass)
• Charts & data visualization
• Modern UI elements
• Logos & icons with depth

Where do we put it? → Inside <defs>

The <linearGradient> element – Core attributes

Most common & beginner-friendly setting (recommended for 90% of cases):

The real magic: <stop> elements (color points)

Inside <linearGradient>, you put one or more <stop> tags:

• Each <stop> says: “At this position along the line, use this color”
• offset = position (0% to 100%)
• stop-color = color at that point
• stop-opacity = transparency at that point (optional)

Example 1 – Simplest horizontal gradient (left to right)

Result: Rectangle smoothly changes from yellow (left) to red (right).

Here are some visual examples of basic horizontal gradients (imagine seeing these side by side):

• Yellow → Orange → Red
• Blue → Purple → Pink
• Black → Gray → White (chrome look)

Example 2 – Vertical gradient (top to bottom)

Just change the coordinates:

Example 3 – Diagonal gradient (very popular for buttons)

→ Gradient flows from top-left to bottom-right.

Example 4 – Multiple stops + opacity (glass / shine effect)

→ Creates a nice highlight/shine on top of a blue button.

Quick Cheat Sheet – Common gradient directions

| Direction | x1 y1 x2 y2 | Typical use case | |————————|——|——|——|——|———————————–| | Horizontal left→right | 0% 0% 100% 0% | Most buttons, bars | | Vertical top→bottom | 0% 0% 0% 100% | Sky, backgrounds | | Diagonal top-left→bottom-right | 0% 0% 100% 100% | Modern cards, shiny effects | | Diagonal bottom-left→top-right | 0% 100% 100% 0% | Alternative diagonal | | Right→left | 100% 0% 0% 0% | Reverse direction |

Common beginner mistakes

• Forget id → gradient invisible (fill=”url(#wrongId)” does nothing)
• No <stop> tags → gradient black or transparent
• Wrong percentages → gradient jumps or stays one color
• Use gradientUnits=”userSpaceOnUse” without thinking → gradient size fixed, not scaling with shape
• Too few stops → hard transitions (add more for smooth rainbow)

Mini practice for you

1. Make a sunset rectangle: orange → purple → dark blue (vertical)
2. Create a shiny button: base color + white-to-transparent diagonal gradient overlay
3. Try a rainbow gradient (at least 6–7 stops) horizontal across the whole SVG

Paste your code here if you want feedback — I’ll review it like we’re pair-programming 😄

This is the foundation of linear gradients — super useful and looks professional instantly! Next we can cover radial gradients (circular), repeating gradients, angle control, or combining gradients with filters.

Which part feels most exciting or confusing? Diagonal directions? Multiple stops? Shine effects? Just tell me — we’ll zoom in with more examples until it clicks perfectly! 🚀