CSS Background gradient
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>, ...);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 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-simple
.radial-gradient-simple {
background: radial-gradient(red, blue );
}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.