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. Also, check out my updated dropdown menu (demo) using CSS gradient.
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
The following filter wlil only be read by IE:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
Cross-Browser CSS Gradient (demo)
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+ */
CSS Gradient Dropdown Menu
Below is a pure CSS gradient dropdown menu using CSS3 text-shadow, radius-border, and box-shadow (no Javascript or image)
Internet Explorer Limitations
Internet Explorer gradient filter doesn't support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.
Final Remarks
Please note not all browsers support CSS gradient. To be safe, you shouldn't rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.
IE Sucks big time – everyone get Mozilla or Chrome
Freaking IE sucks
No mention of Opera’s approach. A shame to see another dev article ignoring what is a solid and very innovative browser.
Solid and innovative, fine, but it has about the same market percentage right now as IE6.
But as of now, around maybe 50 percnet (it was either 46 or 53, can’t remember) of internet users are using IE. I don’t like IE, but people still use (can’t imagine why, but OK, since most people don’t change browsers, and others actually ‘like’ IE….but I’m not here to judge….just give you the numbers) it.
Many people still use IE b.c it is the internet browser that comes already on the CPU’s … BOOO!!! My fav is Flock (Firefox) =D
Opera’s layout engine appears to render just fine, whether it picks up the Mozilla or Webkit directions for layout. I wouldn’t worry too much; maybe it wasn’t worth a mention because Presto just works.
What about you Marilize ? Do you suck big time ?
Umm… lol?
Thanks a lot !, this was very help full
great , just great
worked perfectly.
now to find a rounded corners hack for IE.
G
CSS3PIE
>now to find a rounded corners hack for IE.
I recommend this http://css3pie.com/
Works like a clock.
no gradient in opera
Gradient for all browser
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
background-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#3b89c5′, endColorstr=’#124f7e’); /* for IE */
background-color:#124f7e;
Gradient for ALL browsers:
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ee5f5b’, endColorstr=’#c43c35′, GradientType=0);
IS IT SUPPORT FOR IE7 – 8 – 9
Rounded corners are easily created in IE9 as in the following line of css example:
box{
border-radius:15px; //for IE9 and Opera
-moz-border-radius:15px; //for firefox
}
Try on other browsers to see how it works.
See nice custom menu line-gradient example here:
http://www.xhtml.co.il/en/Tools/Linear-Gradients-Custom-Menu
It is really helpful
great work thanks
Well done, Thank you
Kill IE!
thanks, been looking for this all day.
thanks… very helpful for seasons greeting background let me try this…
Yes all this works on the latest browsers, however I need to find something compliant for ALL browsers and versions. Try putting gradients on IE6. pfft.. IE is super gay…. damn you microsoft, damn you.. Any one have any ideas?
Oh and pie will eventually give you problems down the way, and modinizir is useless too…….
Thanks! I have been wrapped in an IE form nightmare and couldn’t get IE9 to accept any background color to the input fields until I ran across this fix. Now I have not just a color but a gradient. You rock!
Thanks! this was helpful. How do a get the gradient to appear from left to right for IE?
I have a piece of code in my site that uses the gradient code and I can’t work out how to make it compatible with Chrome. I have tried various codes but am not having any luck. Can anyone help?
http://netstorepro.com/digthis/book-now
Specifically, I am having problems with the button:
#griddler .button {
background: -moz-linear-gradient(center top , #53CC13 0%, #4CBF10 49%, #3FBA00 50%, #3BB000 100%) repeat-x scroll 0 0 #3BB000;
}
and the the background of the pricing area.
definitely, a BIG BIG deals.thx, for article
Damn on u IE !!
Hey Mitya I just saw this and coded it for Opera…background: -o-linear-gradient(top, #06F, #006); Note that these were my color choices. Good point though.
not work at opear….