linearGradient Syntax
SVG linear gradients are defined in <defs> with <linearGradient>. The gradient direction is controlled by x1, y1, x2, y2 attributes (as fractions 0–1). Color stops use the <stop> element with offset (0–100% or 0–1) and stop-color/stop-opacity attributes.
<linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#6366f1"/>
<stop offset="50%" stop-color="#a78bfa"/>
<stop offset="100%" stop-color="#60a5fa"/>
</linearGradient>radialGradient: Glow & Spotlight Effects
Radial gradients radiate from a focal point. The cx, cy attributes set the gradient centre; r controls the radius. The fx, fy focal point can be offset from the centre to create a spotlight or lens-flare effect. Setting fy to a negative value (e.g., fy="-50%") pushes the brightest spot above the element for a natural top-lit look.
gradientUnits: Two Coordinate Systems
gradientUnits="objectBoundingBox" (default) means coordinates are relative to the filled shape (0–1). gradientUnits="userSpaceOnUse" uses absolute SVG coordinates. For pattern fills, userSpaceOnUse is preferred because it doesn't change based on the element being filled — the gradient stays consistent across the tiled pattern.
Repeating Gradients: gradientSpreadMethod
The spreadMethod attribute controls what happens outside the gradient bounds. pad (default) extends the last stop colour. repeat tiles the gradient. reflect mirrors and tiles — perfect for stripe patterns with smooth transitions. Combine reflect with a 2-stop gradient to create seamless stripe patterns with zero seam.
Combining Gradients with Patterns
The most powerful technique: use a gradient as the fill or stroke of shapes inside a pattern. This creates patterns where individual shapes have their own gradient shading — like polka dots that are each 3D-shaded spheres, or bricks with individual depth.
CSS Gradient vs SVG Gradient
CSS gradients (linear-gradient(), radial-gradient()) are simpler to write but less powerful. SVG gradients support spread methods, user-space coordinates, and can be referenced by multiple elements. For complex patterns, always prefer SVG gradients. For simple background washes, CSS gradients are more convenient and have better tooling support.
Mesh Gradients (SVG 2.0)
SVG 2.0 introduces <meshgradient> — a 2D grid of colour patches with Bézier curve boundaries, similar to Illustrator's Mesh Gradient tool. Support is experimental (Firefox flag only as of 2026), but it promises unprecedented gradient control without filters. Design your mesh gradients now and include a radial gradient fallback for unsupported browsers.