O'Reilly logo

SVG Colors, Patterns & Gradients by Kurt Cagle, Amelia Bellamy-Royds

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required