Linear gradients

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.
anglesThe values are in degrees (deg). 0deg points to the right, 90deg is up, and so on counter clockwise.
side or cornerUse 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%);
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #