Gradient in CSS3

Gradients can be formed in css3 without using an image file. Gradients are two types which are radial and linear. The gradients are supported in webkit and Mozilla browser engine. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.


-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)


background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
background-image: -moz-linear-gradient(#ccc, #000);

A stop is a function, color-stop, that takes two arguments, the stop value (either a percentage or a number between 0 and 1.0), and a color (any valid CSS color). In addition the shorthand functions from and to are supported. These functions only require a color argument and are equivalent to color-stop(0, ...) and color-stop(1.0, …) respectively.

For radial use radial keyword for type.

For more info about webkit css gradient visit this link

Leave a Reply