in CSS

Background Colour Gradients in CSS

## What? 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. ``` .gradient{ background-color:#FFF; /* 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); } ```

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email