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.
Internet explorer gradient is not working in ie8. Other wise every thing is good.
It might be due to the message ie8 displays above the website:
“To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options.”
You need to accept the running of scripts and ActiveX controls in order to make it work.
In case this does not work you can try a different approach with the use of -ms-filter instead of filter:
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′)”;
This works great. Is it possible to implement two vertical gradients for a background? For example, Gradient1 is in the background to the left of the main content/body and Gradient2 would be to the right?
How would you added transparency to the gradient?
like have the top of the gradient black at 0.8 transparency and have the bottom of the gradient black at 0.2 transparency
Try substituting the hex code for RGBA codes — i.e., RGBA(0,0,0,.8) for the .8 transparency black. Just a thought, not tested.
You define alpha transparency in IE filters via the hex value, like:
#AARRGGBB, where AA is the alpha transparency level (00 is transparent, ff is opaque) and RRGGBB are your RGB values. http://msdn.microsoft.com/en-us/library/ms532879(v=vs.85).aspx
For me this only worked in IE8 after adding width and height css attributes.
Even if i use 100% IE8 required it :(
But thanks for the code!
This is all groovy and works perfectly, but interestingly the w3c CSS3 validator throws an error for gradient values attached to background-image, background-color, and background. Haven’t found a way around this and I’m just going to ignore it I suppose… I just love seeing the green “Congratulations!” bar when validating my markup and html :D
What is friendship?Mont Blanc PenWhy do we call a person our friend? When do we call someone a very good friend?
Hy,
Thank you for this article.
It’s seems in Opera doesn’t work css gradient.
Thank you. for this articles.:)
Hi
Thank you so much for this, it helped a lot; I’ve been looking all over the web for gradient backgrounds for quite a while!
Thanks again
Thank Man.
Just a heads up on a typo under the “For Internet Explorer” section. You typed wlil instead of will.
Cheers,
D
Thank you for that very interesting.
No, It does’t work in IE9. The Drop-shadow effect does not work in IE9. So this is not CROSS BROWSER at all!
I am not sure why should someone use if it is not browser compliant?
Thanks so much for giving everyone an extremely spectacular opportunity to read articles and blog posts from this web site. It is usually so excellent plus packed with amusement for me and my office mates to visit the blog at minimum 3 times in one week to read the new tips you will have. And of course, I’m actually motivated concerning the extraordinary principles you give. Certain 1 areas in this post are truly the most suitable I’ve had.
just to let you know to add for IE10
IE10 will be supporting gradients its the same as mozilla with the -moz but with -ms
example below
/*IE10*/
background: -ms-linear-gradient(left top, #017AC1, #00bcdf);
hope you found this helpfull
Thanks Tim! I just tried our site on IE10 and was baffled by the whole gradient thing. Your info worked great!
This is verry good
ihtiyaç kredisi
ev kredi
konut kredisi
uygun kredi
masrafsız kredi
kredi oranları
bireysel kredi
masraf ücreti
kredi hesaplama
kredi hesaplama
taşıt kredisi
Tüketici kredisi
Thanks for the cross-browser one, it was just what I needed.
How to make gradient for IE from left to right, NOT from top to bottom
To do this, you will need to add a GradientType parameter to the code. The default GradientType is 0, which is vertical. If you set it to 1, as below, it should be horizontal.
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=’#cccccc’, endColorstr=’#000000′);
Hope this helps out.
works like a charm, i can manipulate from every corner of the div tag. f$$k internet explorer, didn’t tested yet. but far as i know, webkit scripts won’t be read. why MS , why ?
Great work. Keep it up !