A linear-gradient function represents a progressive transition between 2 or more colors along a straight line. To create it, you need to specify at least two color stops and direction or an angle. The simplest syntax within the shorthand background or background-image property can go like this:

{

background: linear-gradient(direction, color-stop1, color-stop2, ...);

}

To specify the gradient direction, you can use predefined text values — to bottom, to top, to right, to left, to bottom right, etc. If you want to be more specific, you can set the angle. For example, a value of 0deg is equivalent to a bottom to top gradient, and as far as positive angles represent clockwise rotation, the angle 90deg will result in a left to right gradient.