CSS Background Gradients


Example

Gradients are new image types, added in CSS3. As an image, gradients are set with the 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>, ...);
ValueMeaning
<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);
}
ValueMeaning
circleShape of gradient. Values are circle or ellipse, default is ellipse.
farthest-cornerKeywords describing how big the ending shape must be. Values are closest-side, farthest-side, closest-corner, farthest-corner
top leftSets the position of the gradient center, in the same way as background-position.

Repeating gradients

Repeating gradient functions take the same arguments as the above examples, but tile the gradient across the background of the element.

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}
ValueMeaning
-45degAngle unit. The angle starts from to top and rotates clockwise. Can be specified in deg, grad, rad, or turn.
to leftDirection of gradient, default is to bottom. Syntax: to [y-axis(top OR bottom)] [x-axis(left OR right)] ie to top right
yellow 10%Color, optionally followed by a percentage or length to display it at. Repeated two or more times.

Note that HEX, RGB, RGBa, HSL, and HSLa color codes may be used instead of color names. Color names were used for the sake of illustration. Also note that the radial-gradient syntax is much more complex than linear-gradient, and a simplified version is shown here. For a full explanation and specs, see the MDN Docs