Now, if you want to specify a direction for the gradient, there are a couple of ways. The gradient will always begin in the opposite direction to where you are sending it. However, when no direction is set, a gradient will always default to a top to bottom direction. For example:

.linear-gradient {
    background: linear-gradient(to top right, red, blue); 
}

In this instance, the gradient heads to the top right. It starts red in the bottom-left corner and fades to blue at the top right.

If you're more mathematically minded, you may believe it would be comparable to write the gradient like this:

.linear-gradient {
    background: linear-gradient(45deg, red, blue); 
}

However, keep in mind that on a rectangular box, a gradient that heads 'to top right' (always the top right of the element it's applied to) will end in a slightly different position than 45deg (always 45 degrees from its starting point).

It's worth knowing you can also start gradients before they are visible within a box. For example:

.linear-gradient {
    background: linear-gradient(red -50%, blue); 
}

This would render a gradient as if it had started before it is even visible inside the box.

We've actually used a color stop in that last example to define a place where a color should begin and end so let's look at those more fully.

Perhaps the handiest thing about background gradients is color stops. They provide the means to set which color is used at which point in a gradient. With color stops you can specify something as complex as you are likely to need. Consider this example:

.linear-gradient {
  margin: 1rem;  
  width: 400px;
  height: 200px;
  background: linear-gradient(#f90 0, #f90 2%, #555 2%, #eee 50%, #555 98%, #f90 98%, #f90 100%);
}

Here's how that linear-gradient renders:

In this example (example_06-03), a direction has not been specified so the default top to bottom direction applies.

Color stops inside a gradient are written comma separated and defined by giving first the color, and then the position of the stop. It's generally advisable not to mix units in one notation but you can. You can have as many color stops as you like and colors can be written as a keyword, HEX, RGBA, or HSLA value.

Read the W3C specification for linear background gradients at http://www.w3.org/TR/css3-images/.

As a simple fallback for older browsers that don't support background gradients, just define a solid background color first. That way older browsers will at least render a solid background if they don't understand the gradient that's defined afterwards. For example:

.thing {
  background: red;
  background: linear-gradient(45deg, red, blue); 
}

After specifying the property (background:) we begin the radial-gradient notation. To start with, before the first comma, we define the shape or size of the gradient and the position. We have used 12rem circle for the shape and size above but consider some other examples:

Next, after the size and/or shape, we define the position. The default position is center but let's look at some other possibilities and how they can be defined:

We end our size, shape, and position 'parameters' with a comma and then define any color stops; which work in exactly the same manner as they do with linear-gradient.

To simplify the notation: size, shape, and position before the first comma, then as many color stops as needed after it (with each stop separated with commas).