Gradients are (often) smooth transitions between a number of different colors.
To create a linear gradient with CSS, you use the background-image property with the value set to linear-gradient():
If you don't type in a direction, it goes from top (color-stop1) to bottom (color-stop2).
Example 2 (direction set to right)
Other posible directions include: to right bottom or to bottom right, to bottom, to bottom left or to left bottom, to left, to left top or to top left, to top, to top right or to right top.
Example 3 (direction set to 140deg)
The deg value represents an angle in degress. One full circle is 360deg.
Example 4 (customization of the gradient)
We may customize the gradient by adding percentages to the colors that define how much space they may take up themselves before the gradient kicks in.
Example 5 (customization of the gradient)
We may create the illusion of a sharp line between two colors by giving both the same percentage value - note that it doesn't have to sum up to 100%
Example 6 (adding more colors)
To add more colors to the mix, simply type in more colors.
Example 7 (creating stripes)
This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect. The first color red takes up the space from 0-20, yellow then starts at 20 and stops at 40, and red then takes up whatever is left.