Hello All,

Earlier, we have used image for gradients effect but now we will use gradient using css3 and we will see how to use many colors in gradient and only one color in gradient.

Gradients are declared by background-color but according to short-hand css method we can sue background.

Syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Gradient are two type -

1) Linear Gradients - in this, define color goes down, up ,left ,right an diagonally.

2) Radial Gradients - in this, goes defined by their center.

An example with output -

Note :- we need to use prefix for rendering in some versions

background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
}