in CSS Basics

Background Colour Gradients in CSS

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. ## 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);

Subscribe To The Weekly Newsletter

Get weekly updates to your email