Linear gradient
The CSS linear-gradient is used to draw a background image that represents smooth transitions between colors along a straight line.
Syntax:
background-image: linear-gradient( direction, color-1 [stop-position-1], color-2 [stop-position-2]...The direction of the linear gradient can be omitted.
The direction can be the keywords or the angle.
The default value for the direction is to bottom which means that gradient starts from top and goes to bottom. Equivalent degrees is 180deg.
The negative value of degrees means the rotation to the left (counterclockwise rotation), the positive value of degrees means the rotation to the right (clockwise rotation).
to top
to right
to bottom
default
to left
The corner keywords used in the linear-gradient property
The linear-gradient property utilizes corner keywords to specify gradient angles. The actual angles of these corner keywords (e.g. “to top left”, “to top right”, “to bottom left”, “to bottom right”) are determined by the dimensions of the gradient box associated with the element.
See the Pen linear-gradient: stripped bar by majadc (@majadc) on CodePen.