Gradients

Introduction

Gradients smoothly blend between as many colors as you add to them to fill in a shape or a stroke. Gradients can be linear, or having colors change along a direction, or radial, where the colors change as they radiate out from a central point in a circular shape.

Before we get to how to build gradients themselves, let's quickly check out a new concept for your SVG file where you can store definitions of shapes and effects for your drawing.

Definitions or "Defs"

The <defs>, or Definitions, part of the SVG drawing appears in its own section at the top of the file. The defs section can contain multiple objects that can be referenced by any of your shapes and can be used for more advanced illustration techniques.

Gradients, clipping paths, filters, CSS styling, and more can exist within this section, and anything written up here should be given a clear and concise id attribute so it can be easily referenced later on when incorporating the effect. You will find how the defs section exists within your SVG files in the following gradient snippets.

Linear Gradients

Linear Gradients are set up within the defs section as follows. Note that this example only has one gradient in the defs section, but you can have as many items as you want here, provided they are written in between the opening and closing defs tags.

<defs>
<linearGradient id="horizontalGradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="green"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<rect x="10" y="10" width="300" height="100" fill="url(#horizontalGradient)"/>

Note the syntax for how to open and close the gradient. "linearGradient" is typed together in camel case, and has a closing tag like an HTML element after the color stops are defined.

The stop elements define where colors appear in the overall position along the gradient. 0% is the start of the gradient, 100% is the end, and more stops can be added at any percentage value along the gradient. Note that each stop element closes with the forward slash appearing just before the closing angle bracket.

The opening linearGradient tag has a few things going on within it. The id is crucial, as that is what you'll use to actually apply the gradient to shapes and items in your drawing.

The x1, x2, y1, and y2 values are all set up much like the Line element that we've already encountered. These attributes define the starting and ending point of your gradient.

Envision the shape that you want to apply a gradient to, and then surround it entirely with a box. Now consider the upper-left corner of this box as point (0, 0) and the lower-right corner as (1, 1). This is the gradient coordinate system we use to define the position and direction of our linear gradient.

In our example, the x1 and y1 values are set to 0, and the x2 value is set to 1 with the y2 value set to 0. This places the end of the gradient all the way across the square in the upper-right corner, creating a perfectly horizontal gradient spreading across the entirety of the shape.

You can define points within the square as decimal values. If you wanted the horizontal gradient to stop halfway across the shape, you'd enter x2="0.5" and so on.

A 45° angle would be made by setting x2 and y2 both to 1, a vertical gradient going from top to bottom would have x2 set to 0 and y2 set to 1, and all other angles in between can be set with a variety of decimal values for wherever you want to place the first and second points of the gradient.

Note the url object in the fill attribute in the rectangle under the defs section. Using this url object and referencing the id using a hashtag is how we apply our gradient to our shapes. In this case, it is fill="url(#horizontalGradient)" which illustrates the importance of using understandable id names for anything you put in the defs section.

Radial Gradients

Radial Gradients are set up much the same way as Linear Gradients, but rather than defining x and y coordinates, you set the center x and y values for a circle, a radius for the final size of the gradient circle, and the focal point x and y values from where the gradient will emanate on your shape.

Leaving these values out will just make your radial gradient start in the center of your shape and end by the time it reaches the outermost edges of the shape. Here is a basic radial gradient setup:

<defs>
<radialGradient id="radGrad">
	<stop offset="0%" stop-color="white"/>
	<stop offset="50%" stop-color="teal"/>
	<stop offset="100%" stop-color="black"/>
</radialGradient>
</defs>
<circle cx="50" cy="50" r="45" fill="url(#radGrad)"/>

This example will create a circle that has a center color of white, blends to teal midway between the center and the edges of the circle, and ends up blending to black by the edges.

You control the position of the gradient by using the Circle attributes along with the focal point attributes, or "fx" and "fy."

The following example will start the same gradient from above in the upper right corner of the circle and have it fading to teal and black heading down towards the lower-left:

<defs>
<radialGradient id="radGrad2" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.25">
	<stop offset="0%" stop-color="white"/>
	<stop offset="50%" stop-color="teal"/>
	<stop offset="100%" stop-color="black"/>
</radialGradient>
</defs>
<circle cx="50" cy="50" r="45" fill="url(#radGrad2)"/>

Gradient Tricks

The relative positions of the color stops determine how quickly the colors change into one another. The farther away the stop offsets between two colors, the longer it takes for one to go to the other. Conversely, the closer the stops are to one another, the sharper the color transition.

By placing stop offsets 1% away from each other, you can make hard color transitions across your gradient for artistic effects. In the following example, we make a simple eyeball staring out at you! See if you can follow along with the color patterns:

<defs>
<radialGradient id="eyeball">
	<stop offset="0%" stop-color="black"/>
	<stop offset="30%" stop-color="black"/>
	<stop offset="31%" stop-color="lightBlue"/>
	<stop offset="65%" stop-color="lightBlue"/>
	<stop offset="66%" stop-color="white"/>
	<stop offset="100%" stop-color="white"/>
</radialGradient>
</defs>
<circle id="eyeSeeYou" cx="100" cy="100" r="45" stroke="black" stroke-width="2" fill="url(#eyeball)"/>

The gradient is made up of two offsets for each ring of color we want to create. Note how each color has two stop entries, one for the start position of the color, and one for the end position of the color. This keeps the color the same between those percentage values, and putting the offset only 1% larger than the previous colors creates a hard transition.

Having a black color start at 0% and end at 30% creates a black pupil that takes up 30% of the circle from the center out, then starting the light blue color at 31% gives us the hard transition from the pupil to the iris, then that blue iris continues on to 65% of the circle.

The iris has a hard transition to the sclera, or white of the eye at 66%, and then the white continues on to fill in the rest of the eye up to 100%.

Gradient Patterns

You can create gradient patterns by setting the spreadMethod attribute on the gradient. By default, the spreadMethod attribute is set to "pad" which extends whichever color you end the gradient with past the edges of the set gradient area until it fills up the rest of your shape.

A spreadMethod of "reflect" will continue the gradient past the set edges by reversing the order of the colors back and forth until the shape is filled.

A spreadMethod of "repeat" will repeat the order of the gradient colors over and over again until the shape is filled.

Recall that gradient starting and ending points can be set as if the coordinates were applied to a bounding box around your shape. If you set up the starting and ending points to end within your shape, you can take full advantage of the spreadMethod to build color patterns without having to write a ton of offsets.

For example, the following code will produce a square with a repeating yellow and black stripe pattern:

<defs>
<linearGradient id="cautionStripes" x1="0" y1="0" x2="0.25" y2="0.25" spreadMethod="repeat">
	<stop offset="0%" stop-color="yellow"/>
	<stop offset="50%" stop-color="yellow"/>
	<stop offset="51%" stop-color="black"/>
	<stop offset="100%" stop-color="black"/>
</linearGradient>
</defs>
<rect x="10" y="10" width="200" height="200" fill="url(#cautionStripes)"/>

Note how the x2 and y2 coordinates of the linearGradient are set to 0.25 each. This places the end point of the gradient at a 45 degree angle down and to the right of the starting point, and it ends a quarter of the way through the square.

The yellow stops go from an offset of 0% to 50% to take up the first half of the gradient pattern, and the black stripe goes from 51% to 100%. Of course, you don't have to use hard offsets like this and only make repeating stripes. The spreadMethod works for all gradient styles.