How to create a gradient with CSS3
Creating a gradient you could of course still make use of a background image. We advise against this solution though because you could also make use of the CSS3 gradient property. In practice you will notice that using CSS3 gradient will be a more time-consuming solution because this property needs to be called up in 5 different ways and adding an image like in CSS2.1 is still required. Nevertheless we still recommend making use of the CSS3 gradient property because this will result in a faster website loading time
.gradient{
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #000, #fff);
/* IE10+ */
background-image: -ms-linear-gradient(top, #000, #fff);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #000, #fff);
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#fff));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #000, #fff);
/* Fallback Background */
background-color: #fff;
/* Fallback image (<IE9) */
background-image: url(fallback-image.jpg);
}
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #000, #fff);
/* IE10+ */
background-image: -ms-linear-gradient(top, #000, #fff);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #000, #fff);
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#fff));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #000, #fff);
/* Fallback Background */
background-color: #fff;
/* Fallback image (<IE9) */
background-image: url(fallback-image.jpg);
}