Linear gradients are those where colors transition across a straight line: from top to bottom, left to right, or along any arbitrary axis.
The basic syntax for linear gradients:
snippet
background-image: linear-gradient(<direction>, <color stops>.....);
/*Adding multiple color stops*/
background-image: linear-gradient(<direction>, <color stop-1>, <color stop-2>.....<color stop-n>);
| <direction> | It is the (angle) along which the gradient should proceed, or the (side) or (corner) from which it should start. |
| angles | The values are in degrees (deg). 0deg points to the right, 90deg is up, and so on counter clockwise. |
| side or corner | Use the top, bottom, left, and right keywords. |
| <color stops> | It is the color and a percentage or length specifying how far along the gradient that stop is located. |
Example
snippet
background-image: -moz-linear-gradient(270deg, #FFF 0%, #000 100%);
background-image: -moz-linear-gradient(top, #FFF 0%, #000 100%);
background-image: -moz-linear-gradient(#FFF 0%, #000 100%);
Defaults
default direction - top is the default in the absence of a specified direction.
default color stop% - The first color stop is assumed to be at 0%, and the last color stop is assumed to be at 100%,
Example
snippet
background-image: -moz-linear-gradient(#FFF, #000);
Adding additional color stop 75% along the way
snippet
background-image: -moz-linear-gradient(30deg, #000, #FFF 75%, #000);
Starting color stop at 50%
snippet
background-image: -moz-linear-gradient(30deg, #000 50%, #FFF 75%, #000 90%);
