Using Gradient in HTML using simple CSS

Posted on August 12, 2011


In this post I show(after some googling) how to use gradients(color transitions) in your html using simple CSS.
I am putting the CSS code below.
This code can be pasted in the css file of your project.
you have to create a div with id as “gradient”.
Alternatively, you can paste this code in style compoenet of any element where you want the gradient effect.

the code is:

/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#ff9900));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #000, #ff9900);
/* For Internet Explorer 5.5 – 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000, endColorstr=#ff9900);
/* For Internet Explorer 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)”;

I am showing the preview of the effect which I got.
**** One can change the colors by looking at the code above !!****