The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post is usefull for all people especially those who want that there website opens quikly on all slow and dial up connections. So, instead of using photos for background gradients we will make use of of a CSS3 property which is linear gradient .So Look at this Example
In this photo you can see the shades of white, green, purple and blue produced with the help of linear gradient. You can use both rgb and hex colors for this css3 property.
So code used in above picture for purple color is (Google Chrome, Safari)
background: -webkit-gradient(linear, left top, left bottom, from(#A349A4), to(rgb(126,56,126)));For firefox you have to use
background: -moz-linear-gradient(top, #A349A4, rgb(126,56,126));For IE Use css
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A349A4', endColorstr='rgb(126,56,126)');
For Opera You can go with this
background: -o-linear-gradient(top, #A349A4, rgb(126,56,126));
To use in all browsers use a combine css like this
.thisClass {background: -webkit-gradient(linear, left top, left bottom, from(#A349A4), to(rgb(126,56,126))); /** Google Chrome , Safari **/background: -moz-linear-gradient(top, #A349A4, rgb(126,56,126)); /** Firefox **/ background: -o-linear-gradient(top, #A349A4, rgb(126,56,126)); /** Oper **/filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A349A4', endColorstr='rgb(126,56,126)'); /** IE** /}
