SVG Colors, Patterns & Gradients

Chapter 9. Radial Gradients

Linear gradients, as we have seen, are defined by the coordinates of a line (the gradient vector). The color stops are positions along this line. Each color value is then extended to infinity in a straight line on either side. By adjusting the stops and manipulating the vector, linear gradients can create many effects. But they aren’t the only gradient option in SVG.

A radial gradient is one in which color changes radiate outward from a central point. These gradients can create the appearance of a glowing light, or can be used to represent the shading on spheres and similar rounded structures.

In its simplest form, a radial gradient is defined by a circle, with the colors changing from the circle’s center to its edge. This is the default behavior for SVG’s <radialGradient> element. As usual, the default behavior is not the only option, and you can create a number of effects with SVG radial gradients—including effects you cannot yet create with CSS gradients.

This chapter looks at all the possibilities, skimming through the areas where radial gradients are similar to linear gradients and focusing on the differences. The final section looks at the big picture, showing how you can combine many different gradients to create a complex scene.

Radial Gradient Basics

Radial gradients are similar to linear gradients in structure, at least in the markup. As with <linearGradient>, a <radialGradient> is a container for <stop> elements, each of which have an