Think of SVG gradients like mixing paint on a canvas. Instead of using a single solid color, you blend two or more colors together to create smooth transitions. Just as an artist might wet-blend oils to create a seamless shift from blue to purple, SVG gradients let you specify starting and ending colors, and the browser handles all the blending in between.
Linear gradients work like watching a sunset on the horizon. The colors transition in a straight line from one point to another, you might see orange at the bottom gradually shifting to deep purple at the top. In SVG, you control this direction by setting start and end coordinates. Want colors flowing left to right? Top to bottom? Diagonally across your shape? You simply adjust these coordinates to paint your gradient in any direction.
Radial gradients, on the other hand, behave like a spotlight shining on a stage. The brightest color appears at the center and radiates outward in circles, gradually transitioning to your outer color. This creates a natural sense of depth and dimension, perfect for making buttons appear three-dimensional or adding that glowing orb effect to illustrations.
The beauty of SVG gradients lies in their flexibility. You can add as many color "stops" as you want along the way, creating rainbow effects or subtle multi-tone transitions. And because SVG is vector-based, your gradients scale perfectly whether displayed on a tiny mobile icon or a massive billboard, no pixelation, just smooth color blending at any size.
Frequently Asked Questions
What is an SVG gradient?
An SVG gradient is a smooth transition between two or more colors that can be applied to fills or strokes in scalable vector graphics. Unlike solid colors, gradients create depth and visual interest by blending colors seamlessly. SVG supports two types: linear gradients (colors flow in a straight line) and radial gradients (colors radiate outward from a center point).
What is the difference between linear and radial gradients in SVG?
Linear gradients transition colors along a straight line from one point to another (like a sunset horizon), while radial gradients transition colors outward from a center point in a circular pattern (like a spotlight). Linear gradients are defined using x1, y1, x2, y2 coordinates, whereas radial gradients use cx, cy for center and r for radius.
How do I create a diagonal gradient in SVG?
To create a diagonal gradient, set both x and y coordinates for the start and end points. For example, x1="0%" y1="0%" x2="100%" y2="100%" creates a gradient from top-left to bottom-right. Adjust these values to change the angle: x1="0%" y1="100%" x2="100%" y2="0%" goes from bottom-left to top-right.
What are gradient stops and how do they work?
Gradient stops are points along the gradient where you define a specific color. Each stop has an offset (position from 0% to 100%) and a stop-color. The browser automatically blends colors between stops. You can add multiple stops to create complex color transitions, and use stop-opacity to add transparency at specific points.
Can I animate SVG gradients?
Yes, SVG gradients can be animated using CSS animations, SMIL animation, or JavaScript. You can animate stop colors, stop positions, gradient coordinates, and opacity. Common techniques include shifting stop offsets for a flowing effect, changing colors for mood transitions, or moving the gradient position for dynamic lighting effects.
Why isn't my SVG gradient showing up?
Common reasons include: the gradient ID doesn't match the fill reference (check for typos), the gradient is defined outside the defs element, the element has no dimensions or is hidden, or there's a CSS rule overriding the fill. Also ensure the gradient definition appears before it's referenced in the document, and verify the URL syntax: fill="url(#gradientId)".
What is gradientUnits in SVG and when should I change it?
gradientUnits determines how gradient coordinates are interpreted. The default objectBoundingBox uses percentages relative to the element being filled (0-100%). userSpaceOnUse uses absolute coordinates matching your SVG's coordinate system. Use userSpaceOnUse when you want a gradient to span multiple elements consistently or need pixel-precise positioning.
How do I make a transparent gradient in SVG?
Use the stop-opacity attribute on your gradient stops. Set stop-opacity="0" for fully transparent and stop-opacity="1" for fully opaque. You can also use rgba or hsla color values in stop-color. This is useful for creating fade effects, soft shadows, or blending elements with backgrounds.
Can I reuse the same gradient across multiple SVG elements?
Yes, define the gradient once inside a defs element with a unique ID, then reference it using fill="url(#yourGradientId)" on any element. This approach reduces file size and makes updates easier since changing the gradient definition automatically updates all elements using it.
How do SVG gradients compare to CSS gradients?
SVG gradients offer more control for complex shapes and can fill any SVG path, while CSS gradients are limited to rectangular backgrounds. SVG gradients support spreadMethod for extending beyond bounds, can be transformed independently, and work better for illustrations. CSS gradients are easier for simple backgrounds and automatically respond to element sizing.