CSS allows you to create a background colour gradient on any element. Allowing the background colour to change colour from beginning of the element to the end. This increases readability on the element rather than using a solid colour. ## Why?
Using CSS to do this task will mean less images on the page and will increase [page load times](http://www.paulund.co.uk/11-steps-to-speed-up-your-wordpress-site "11 Steps To Speed Up Your WordPress Site"). ## How?
With many of the new features in CSS there is a different syntax for the different browsers but it is important to use all of them so the user will get the same design on any browser they use. To create a background with gradient you will need the following CSS. The first colour value is the starting colour and the second colour is what the gradient will fade into.
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#FFFFFF, #000000);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#000000));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#FFFFFF, #000000);
/* Opera 11.10+ */
background-image: -o-linear-gradient(#FFFFFF, #000000);
/* Microsoft IE10 */
background-image: -ms-linear-gradient(#FFFFFF, #000000);