Create CSS3 Gradients

What is Gradients
Gradient is a smooth transition from one color to another. Its a color technique where one color gradually fades into another color. Several color combinations can be applied to a single element. In most of the popular sites logos, menus, buttons are created just by using color variations in subtle, very creative way. Gradient enhance the look of a web page and makes the web page look more richer. In older versions of browsers gradient was produced by using images given in a fallback attribute. But now gradient are supported by almost all the latest version of browsers and you can create gradient using CSS3 in your own style. 


Types of Gradient:

• Linear Gradient
• Radial Gradient

Linear Gradient
The most common type of gradient you will see is a linear gradient of two colors or multiple colors. This means that the gradient will move in a straight line changing gradually from the first color to the second along that line. 
Linear Gradient looks like:

Syntax to define Linear gradient
      linear-gradient(pos, #AAA B, #XXX Y);
Where:
pos = the position of  first colour, giving direction to the gradient
#AAA = primary colour
B = where the fade begins (%)
#XXX = secondary colour
Y = where the fade begins (%)
Position can be projected in following ways

• Horizontal
• vertical
• Upper side diagonal
• Lower side diagonal

Setting Horizontal Gradient:

linear-gradient(left, # F4305E  0%, # F4305E  100%);

In above example transition of color(fading) will start from left side to right side horizontally.

linear-gradient(right, #F4305E 0%, #EFACBD 100%);

In above example transition of color will start from lright side to left side horizontally. 

Now to set it as the background of a DIV you have to write

div {

background: linear-gradient(left, #F4305E  0%, #EFACBD 100%)

}

Div with above gradient applied will look as shown in below image:

Browser Specific syntax for CSS3 gradient:
To make your gradient to work cross-browser, you need to use browser specific syntax for most browsers and filter for Internet Explorer 9 and lower (actually 2 filters). 


For Internet Explorer
IE 5.5–7 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F4305E ', endColorstr='# EFACBD ', GradientType=1);

 IE 8–9 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F4305E', endColorstr='# EFACBD  ', GradientType=1)";

 IE 10 +
-ms-linear-gradient(left, # F4305E  0%, # EFACBD   100%);


For Mozilla: -moz- prefix is added
-moz-linear-gradient(left, #F4305E 0%, #EFACBD 100%);


For Chrome/ Safari: -webkit- prefix is added
-webkit-linear-gradient(left, #F4305E 0%, #EFACBD 100%);


For Opera 11.1+ : -o- prefix is added
-0-linear-gradient(left, #F4305E 0%, #EFACBD 100%);


Setting Vertical Gradient:
To give vertical gradient pos parameter in syntax mentioned above will take value top if we want to have color transition from top end or to have color transition from bottom end, pos will take value bottom
Example
For Fire fox:

background: -moz-linear-gradient(top,  #66dd04 0%, #84bc56 49%, #c5e0af 100%);

For Chrome 10+, Safari 5.1+:

background: -webkit-linear-gradient(top,  #66dd04 0%,#84bc56 49%,#c5e0af 100%);

For Opera 11.10+

background: -o-linear-gradient(top,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

For IE 10+:

background: -ms-linear-gradient(top,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

For IE-9

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66dd04', endColorstr='#c5e0af',GradientType=0 );

In above example I have used three colors to make gradient. We can use any number of color and can set their fading %  accordingly.
So the gradient made above will look like:

Setting Diagonally Gradient:


Up side Diagonal
To give up side diagonal gradient pos parameter in syntax mentioned above will take value 45deg 

For Fire fox:

background: -moz-linear-gradient(45deg,  #66dd04 0%, #84bc56 49%, #c5e0af 100%);

For Chrome 10+, Safari 5.1+:

background: -webkit-linear-gradient(45deg, #66dd04 0%,#84bc56 49%,#c5e0af 100%);

For Opera 11.10+:

background: -o-linear-gradient(45deg,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

For IE 10+:

background: -ms-linear-gradient(45deg,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

Upside diagonal Gradient looks like:

Down side Diagonal Gradient
To give upside diagonal gradient pos parameter in syntax mentioned above will take value -45deg 


For Fire fox:
background: -moz-linear-gradient(-45deg,  #66dd04 0%, #84bc56 49%, #c5e0af 100%);

For Chrome 10+, Safari 5.1+:

background: -webkit-linear-gradient(-45deg, #66dd04 0%,#84bc56 49%,#c5e0af 100%);

For Opera 11.10+:

background: -o-linear-gradient(-45deg,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

For IE 10+:

background: -ms-linear-gradient(-45deg,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

Down side diagonal Gradient looks like:

Radial gradients:

In Radial Gradient  color will start fading from center to outward direction.

Syntax to define radial Gradient:

For Fire fox:
background: -moz-radial-gradient(center, ellipse cover,  #66dd04 0%, #84bc56 49%, #c5e0af 100%);

For Chrome 10+, Safari 5.1+:

background: -webkit- radial -gradient(center, ellipse cover , #66dd04 0%,#84bc56 49%,#c5e0af 100%);

For Opera 11.10+

background: -o- radial -gradient( center, ellipse cover ,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

For IE 10+:

background: -ms- radial -gradient( center, ellipse cover ,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 


Radial Gradient looks like:

This was all about to create gradient. You can add more beauty to gradient applied on any element by adding gradient effects on mouse hover and on mouse out.