Gradients are new image types, added in CSS3. As an image, gradients are set with the [background-image](<http://stackoverflow.com/documentation/css/296/backgrounds/2189/background-image>) property, or the background shorthand.

There are two types of gradient functions, linear and radial. Each type has a non-repeating variant and a repeating variant:

linear-gradient()
repeating-linear-gradient()
radial-gradient()
repeating-radial-gradient()

linear-gradient()

A linear-gradient has the following syntax

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);

Value | Meaning | —— | —— |<direction> | Could be an argument like to top, to bottom, to right or to left; or an angle as 0deg, 90deg… . The angle starts from to top and rotates clockwise. Can be specified in deg, grad, rad, or turn. If omitted, the gradient flows from top to bottom |<color-stop-list> | List of colors, optionally followed each one by a percentage or length to display it at. For example, yellow 10%, rgba(0,0,0,.5) 40px, #fff 100%… |

For example, this creates a linear gradient that starts from the right and transitions from red to blue

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

You can create a diagonal gradient by declaring both a horizontal and vertical starting position.

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

It is possible to specify any number of color stops in a gradient by separating them with commas. The following examples will create a gradient with 8 color stops

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

radial-gradient()

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}