Gradients & Patterns

The <linearGradient> element

A linear gradient interpolates color along a straight line — from a start point to an end point. In SVG, gradients are always defined inside <defs>, given an id, and then referenced from a shape's fill (or stroke) attribute using the url(#id) syntax. The gradient is never rendered on its own; it only exists as a recipe that shapes can reference.

Direction is controlled by two points: x1/y1 (start) and x2/y2 (end). By default these are expressed in objectBoundingBox coordinates — a unit square where 0 means the left/top edge of the shape and 1 means the right/bottom edge — so you never have to know the shape's actual pixel dimensions. A left-to-right gradient is always x1="0" y1="0" x2="1" y2="0", regardless of whether the shape is 20 px wide or 200 px wide.

A simple two-stop orange-to-red gradient

The simplest gradient has two <stop> elements: one at offset="0%" (the start) and one at offset="100%" (the end). The browser smoothly interpolates all the colors in between. The stop-color attribute sets the color at that position; stop-opacity can make stops semi-transparent.

Diagonal gradient with three stops and stop-opacity

Setting x2="1" and y2="1" makes the gradient run corner-to-corner diagonally. Adding a third stop in the middle lets you introduce an intermediate color. Setting stop-opacity on a stop is useful when you want the gradient to fade out — here the middle stop is made slightly transparent to produce a hot-spot effect.

Because gradientUnits="objectBoundingBox" is the default, the same gradient definition works for any shape — a narrow pill, a wide banner, a circle — and always stretches to fill it corner-to-corner. If you need the gradient to cover a specific pixel region (for example, a gradient that spans the whole SVG canvas and is shared by multiple shapes), switch to gradientUnits="userSpaceOnUse" and provide coordinates in the viewBox's own units.

The <radialGradient> element

A radial gradient radiates outward from a center point to a circular (or elliptical) edge. The main attributes are cx/cy (center of the gradient circle) and r (its radius). Like <linearGradient>, these are expressed in objectBoundingBox coordinates by default, so cx="0.5" cy="0.5" always means "the center of whatever shape this is applied to."

An optional focal point (fx/fy) lets you shift where the gradient starts without moving the circle boundary. This is the key trick for making a shape look three-dimensional — place the focal point slightly above and to the left of center to simulate a light source hitting a sphere.

Sphere illusion with an off-center focal point

The gradient below runs from a pale amber highlight at the focal point through green to dark teal at the outer edge. The focal point is shifted toward the upper-left (fx="0.35" fy="0.35"), which creates the impression of a spherical surface lit from that direction.

Side-by-side: centered vs. off-center focal point

To see the focal-point effect clearly, compare a centered focal point (fx/fy at the same position as cx/cy) against the off-center version. When the focal point matches the center, the shape looks like a flat disk. When it is shifted, the shape gains apparent curvature.

The <pattern> element

Gradients blend colors; patterns tile shapes. A <pattern> defines a rectangular unit — you draw any SVG content inside it, then use fill="url(#id)" to tile that unit across any shape. The browser handles the repetition automatically, just as CSS background-repeat tiles an image.

Two important attributes control the coordinate system:

• patternUnits — controls the meaning of the pattern's x/y/width/height (its position and tile size). The default is objectBoundingBox, which scales the tile relative to the filled shape. Setting it to userSpaceOnUse makes these coordinates absolute in the viewBox, so the tile size is always the same number of pixels regardless of the shape's size — usually the more predictable choice.
• patternContentUnits — controls the coordinate system for the content inside the pattern (your shapes). Default is userSpaceOnUse, meaning the shapes inside use the same viewBox coordinates as the rest of the SVG.

For most practical patterns, set patternUnits="userSpaceOnUse" and give width/height in viewBox units. This makes the tile size explicit and predictable.

Dot-grid pattern

A dot grid is one of the most common SVG patterns. The tile is a small square; each tile contains a single centered circle. When tiled, the circles appear as an evenly spaced grid of dots.

The pattern tile is 16×16 units and the dot sits at its center (8, 8). Because patternUnits="userSpaceOnUse", the tile is always 16 viewBox units wide — not a fraction of the filled shape. The background gray rectangle and the pattern rectangle stack on top of each other: the first provides the base color, the second overlays only the dots, leaving the spaces between dots transparent so the gray shows through.

Diagonal stripe pattern

Stripes work by drawing a filled rectangle that covers part of the tile, then tiling it. Diagonal stripes are just as easy: use a rotated line or a parallelogram. Here the tile contains two rectangles: a light gray base and a darker gray stripe, producing alternating bands.

The patternTransform="rotate(45)" attribute rotates the entire tile (including its coordinate system), turning the vertical stripe into a diagonal one. This is the standard idiom: define a simple axis-aligned tile and rotate it with patternTransform rather than computing diagonal coordinates by hand. The same trick works for any angle.

Pattern on a non-rectangular shape

One of the advantages of SVG patterns is that they clip naturally to any filled shape. The same url(#id) reference on a circle or polygon tiles through it, with no extra clipping code required.

Because patternUnits="userSpaceOnUse", the dot spacing is consistent across all three shapes — the dots are not stretched or scaled to fit each shape individually. They form a continuous grid that each shape "punches through" to reveal.