Creating linear gradient backgrounds in CSS

For some time, various Web Kit enabled browsers have supported background gradient styling, but it’s only really since the widespread use of CSS3 (and at the same time, the release of IE 9), that mainstream developers have been utilising them.

Because like with all emerging technologies there were early adopters of the method, there are a few legacy properties that still need to be defined to ensure maximum coverage amongst the modern browsers. Therefore to ensure that the majority of your users are able to view the background, you should declare 6 different properties in your style sheet for each element .

These are;

.gradient {
/* These default settings act as a fallback, for non-standards compliant browsers */
background-color: #F0F0F0;
background: url(img/backup.png);
background-repeat: repeat-x;

/* < Chrome 9 & Safari 4, 5 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F0F0F0), to(#666666));

/* Safari 5.1 & Chrome 10+ */
background: -webkit-linear-gradient(top, #F0F0F0, #666666);

/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #F0F0F0, #666666);

/* IE 9 & 10 */
background: -ms-linear-gradient(top, #F0F0F0, #666666);

/* Opera 11.10+ */
background: -o-linear-gradient(top, #F0F0F0, #666666);

/* W3C Standards */
background: linear-gradient(to bottom, #F0F0F0 0%, #666666 100%);

/* IE 6 - 9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0F0F0', endColorstr='#666666',GradientType=0 );
}

The reason we put the declarations in this order is so that there is always a fallback option that can be used by non-compliant browsers. With all CSS, browsers will always fall back to the last known working statement. An example of this is for Chrome 10 – it will understand the declarations up to the -webkit-linear-gradient, but understands nothing past that, so will show the background on that row.

Changing the direction of the gradient is relatively easy also, simply replace ‘top’ with ‘left’ or ‘right’ to achieve the desired effect.

In Chrome 1-9 and Safari 4-5, when using words instead of percentages, you much specify ‘top left’, or ‘top right’ for compliance. (not just ‘left’, or ‘right’ e.g:

background: -webkit-gradient(linear, top left, top right, from(#F5F5F5), to(#DDDDDD));

Different background effects can also be used, e.g. radial, circular, elliptical, and also multiple colour stops can be used at various points along the gradient.

I hope this helps. If you have any questions, just post them below. If you are interested in any of the services Impression offers; SEO and PPC, then get in touch.