CSS Backgrounds 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>, ...);
| 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);
}
| Value | Meaning |
|---|---|
circle | Shape of gradient. Values are circle or ellipse, default is ellipse. |
farthest-corner | Keywords describing how big the ending shape must be. Values are closest-side, farthest-side, closest-corner, farthest-corner |
top left | Sets 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% );
}
| Value | Meaning |
|---|---|
-45deg | Angle unit. The angle starts from to top and rotates clockwise. Can be specified in deg, grad, rad, or turn. |
to left | Direction 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
