Creating Gradients Without Images - Beginning CSS3 - page 429

functions: linear-gradient() , radial-gradient() , repeating-linear-gradient() , or repeating-radial-
gradient() . Unfortunately, the syntax has undergone numerous changes, resulting in the need to pass different
arguments to the browser-specific functions.
You define a gradient by specifying a series of color stops along an imaginary gradient line. You can either
specify the position of each color stop or leave it up to the browser to space them out evenly. The browser
automatically transitions the colors smoothly from one color stop to the next.
Linear gradients progress in a straight line. By default, the gradient line runs from the top to the bottom of
the element, but you can change the direction using keywords or by specifying an angle. The standard syntax
uses angles that follow compass bearings, but the browser-specific functions use the polar coordinate system,
which sets 0° on the right and increases counterclockwise.
Radial gradients emerge from a single point, with the colors spreading out in a circular or elliptical shape.
You can set the size, shape, and position of a radial gradient. Both types of gradients can also be repeated
infinitely to produce a wide range of patterns.
In the next chapter, we'll look at CSS transforms and transitions, which can be used for simple
animation effects.