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:
A linear-gradient has the following syntax
For example, this creates a linear gradient that starts from the right and transitions from red to blue
You can create a diagonal gradient by declaring both a horizontal and vertical starting position.
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
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.