CSS3 gradient

To use CSS3 gradient, copy and paste following code on your project. To understand CSS3 gradient better, see “Explanation of CSS3 gradient”.

1
2

background: -moz-linear-gradient(center top , #FFFFFF, #CCCCCC 1px, #FFFFFF 100px);
background: -webkit-gradient(linear, left top, left 100, from(#FFFFFF), color-stop(1%, #CCCCCC), to(#FFFFFF));

Explanation of CSS3 gradient

There are Webkit and Gecko type of browsers that support gradients. IE won’t be supporting gradients until IE9 shows up.

On Webkit browsers, CSS3 gradient require beginning point (X, Y) and end point (X, Y), they require starting color, and ending color. The angle of gradient will be determined automatically, based on start and end points.

background: -webkit-gradient(linear, left top, left 100, from(#FFFFFF), color-stop(1%, #CCCCCC), to(#FFFFFF));

On Gecko browsers, CSS3 gradient require start point (Y), and two defined colors.

background: -moz-linear-gradient(center top , #FFFFFF, #CCCCCC 1px, #FFFFFF 100px);

Preview of CSS3 gradient: