Creating Linear Gradients

CSS3 gradients enable you to display smooth transitions between two or more specified colors. CSS3 defines two types of gradients: Linear and Radial.

To create a linear gradient, you must define at least two color stops. Color stops are the colors among which you want to render smooth transitions. You can also set a starting point and a direction – or an angle – along with the gradient effect.
In the example below, the colors blue and black are used to create a linear gradient from top to bottom. 

div {
   float: left;
   width: 300px;
   height: 100px;
   margin: 4px;
   color: #FFF; 
   background:-moz-linear-gradient(DeepSkyBlue, Black);


This syntax works in Mozilla (-moz). If you work with a different browser, add the corresponding prefix, so that the browser understands the gradient.


Holla Tech - Learn CSS3

You can use color names, Hex values, RGB, or HSL colors to define the gradient color.

Color Stops [/su_quote] 

Colors can be added one after the other, separated with a comma. The browser will then determine each color stop position.
In the example below, the linear gradient has multiple color stops and runs from top to bottom.

background:-moz-linear-gradient(blue, yellow, green, pink, white);


Holla Tech - Learn CSS3

Color stop positions can be specified for each color.

background:-moz-linear-gradient(blue 20%, yellow 30%, green 85%);


Holla Tech - Learn CSS3

In addition to percentages, you can also use px, em, and so on, to specify the color stops. If you use the same color stop position for two colors, a sharp line will be created between them.

Direction of the Gradient