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:
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.

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%);

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%,

background-image: -moz-linear-gradient(#FFF, #000);

Adding additional color stop 75% along the way
background-image: -moz-linear-gradient(30deg, #000, #FFF 75%, #000);

Starting color stop at 50%
background-image: -moz-linear-gradient(30deg, #000 50%, #FFF 75%, #000 90%);
Related Tutorial
Follow Us #