Safari 4+, Chrome 1+, Firefox 3.6+, and Opera 11.10+ are all now supporting CSS3 gradients.

.gradientBg {
   /* fallback/image non-cover color */
   background-color: #f00; 

   /* fallback image */
   background-image: url(images/fallbackgradient.png); 

   /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#f00));

   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #f9f9f9, #f00); 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #f9f9f9, #f00);

   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #f9f9f9, #f00);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #f9f9f9, #f00);
}
Comments Off

Comments are closed.

Some Relevent Articles


Hi, I am vara designer with over good experience in website designing and development for varadesigns. I would like to share information for the community like coding and technology. I hope this information is usefull.
-vara