Cross-Browser CSS Gradient

Uncategorized 0 Comment 3

The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image.

This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.

For Webkit Browsers

The following line of code is for webkit browsers such as Safari, Chrome, etc. It will display a linear gradient from top (#ccc) to bottom (#000).
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

For Firefox 3.6+

background: -moz-linear-gradient(top, #ccc, #000);

For Internet Explorer

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′);

Cross-Browser CSS Gradient (For All Browsers)

Put the three lines of code from above together and the result is a cross-browser gradient box. Note: I added a background rule at the very top in case the user is using a browser that doesn’t support the feature.
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′); /* for IE */ 
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */

Leave a comment

You must be logged in to post a comment.

© 2016 4frienz. Powered By Flowers

Back to Top