Background Colour Gradients in CSS

GNN Ads

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.

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);
}