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

webkit gradient

For Firefox 3.6+

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

firefox gradient

For Internet Explorer

The following filter wlil only be read by IE:

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

ie gradient filter

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+ */ 

gradient box

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)

css gradient dropdown

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.


Zia Rahman
Apr 14, 2010 at 5:57 am

I loved it. Thanks for posting this.

Apr 14, 2010 at 6:05 am

A nice little technique!

Apr 14, 2010 at 6:23 am

Cool. Thanks for posting this.

Apr 14, 2010 at 6:26 am

Thanks for this great post :-) the example image of the CSS Gradient Dropdown Menu is very nice.

Kristof Neirynck
Apr 14, 2010 at 7:06 am

While internet explorer doesn’t fully support gradient angle it does have the GradientType property.

It has two possible values:
0 vertical (default)
1 horizontal

When you apply a filter in internet explorer it renders the text in that element with jaggys instead of using cleartype. Your menu has this problem on rollover.

Also see Gradient Filter on msdn

Apr 14, 2010 at 7:34 am

Interestingly, the only bad thing is Explorer always crashing. ;)

Apr 14, 2010 at 7:47 am

labai ivairu, isradinga!

Jordan Walker
Apr 14, 2010 at 8:09 am

Great demo and tutorial.

Chris Trygstad
Apr 14, 2010 at 8:59 am

Good stuff! This is what I did and it works great. I even went a step further and built a IE-specific stylesheet for the filter gradient fix. I’ve seen some examples use “background-image” instead of “background”. I would think “background” is right, and this hopefully confirms it. Any evidence that points to “background-image” being a better solution?

Alex Yamaguti
Apr 14, 2010 at 9:22 am

Nice tut…thanks for sharing!!! ✌

Andreas Rauscher
Apr 14, 2010 at 11:29 am

Very nice tut, i think this make my work a bit faster in future.
Thx for sharing this!

Crossbrower Goddess
Apr 14, 2010 at 11:53 am

Nice tutorial, thanks! Just and FYI for folks out there. The demo only works properly in IE 8. Gradient works in IE 7, the drop-down has issues, and his doesn’t work in IE 6 at all (which really should die but some clients refuse to upgrade).

Apr 14, 2010 at 12:17 pm

The biggest issue with using gradients for IE is that it breaks cleartype which makes the text ugly and unreadable half the time. The problem showed up in IE7 but it wasn’t fixed in IE8. Microsoft should just quit trying to make browsers already.

Apr 14, 2010 at 12:21 pm

“It should only be used for enhancing the layout.” I think this is right on. CSS3 only styling should be an enhancement until the majority of browsers are using CSS3. well put

Deluxe Blog Tips
Apr 14, 2010 at 2:24 pm

It’s not really cross-browser. It doesn’t work on latest version of Opera 10.50. It’s clear that the CSS code considers only FF, Chrome, Safari and IE and forgets Opera :)

James W
Apr 14, 2010 at 4:44 pm

If you’re using multiple effects with IE which rely on filter:, they all need to be in the same filter: declaration. I had different classes for rotation, shadows, etc, but IE would only apply the last applicable class in the stylesheet. I had to add IE classes for each combination of filter: rules.

It’s too bad Opera hasn’t implemented CSS gradients, especially with Opera Mini topping the iPhone app store charts.

Apr 14, 2010 at 4:58 pm

Have you guys seen/used for this stuff? doesn’t have the IE gradient code but who uses IE anyway

Apr 14, 2010 at 5:44 pm

Oh my goodness, why can’t Firefox use the same syntax as Webkit chose? Way to make this harder than it should be, guys. :-/

Apr 14, 2010 at 6:20 pm

Really nice technique; I think I’ll use it in the near future. Thanks

Apr 14, 2010 at 8:58 pm

Filter = Proprietary code = bad. It is not a standard and shouldn’t be used. Some things really don’t need to be cross browser – if you have to use a gradient in IE, fall back to an image background.

Apr 15, 2010 at 2:00 am

Very useful! It dispenses with some gradient images.
Thanks for great tuts.

Mia Holte
Apr 15, 2010 at 2:59 am

With now more than 100 million Opera users, this can’t be considered a cross-browser technique.

Apr 15, 2010 at 4:22 am

Nice job, but i think it’s not very useful in daily work!!!

Apr 15, 2010 at 6:57 am

Can anyone tell me which W3 specification does the background gradient figure in, because I failed to find it in (CSS Backgrounds and Borders Module Level 3)?

Because if it’s not part of the specification currently, then I don’t see the point of people complaining about browser implementation differences.

Ken Hamric
Apr 15, 2010 at 9:26 am

Took 32 screenshots across Windows Xp, Vista, Win7, and Ubuntu and OSX and made a slideshow so you can see the rendering on the popular browsers on each platform. See results here.

Apr 15, 2010 at 4:59 pm

fabulous…i love your topics ^_^

Jerome Bohg
Apr 15, 2010 at 7:06 pm

Wow, never realized this feature. Thanks for sharing! Will use this in the future.

Clément Roy
Apr 15, 2010 at 7:18 pm

Nice article (especially about ie filter).

Although there is a little typo error:
“The following filter WILL only be read by IE:” ;-)

monica of hola!design
Apr 15, 2010 at 7:30 pm

Great post! I wanted to learn more about this technique, it’ll very useful for a project I’m working on. CSS3 is truly awesome! Thanks for explaining it so well.

Apr 15, 2010 at 8:32 pm


Hope to see more!

Apr 15, 2010 at 8:59 pm

Nobody uses opera!

Get over it.

Great tut friends!

Matt Bridges
Apr 15, 2010 at 9:04 pm

Excellent post! I have one point, though.

It seems to me that the IE filter only works for vertical gradients, thus limiting the amount of quasi-CSS3 available in IE. If there is another way of rotating the gradient for IE, that would be convenient to know, but I would wonder how many developers and designers care about CSS3 effects in IE…

Again, excellent post, and I LOVE the demo!

Apr 16, 2010 at 2:26 am

Could you use this together with jQuery’s ‘support’ to display more traditional techniques for non-supported browsers?

Apr 16, 2010 at 4:55 am

Come on IE – get with it! :)

Apr 16, 2010 at 3:37 pm

wonderful stuff…….

Apr 16, 2010 at 6:06 pm


I love that css is finally making it easy to do things that could only be done graphically before… It’s a great age for website design!

Anders Bagnegaard Kristensen
Apr 17, 2010 at 2:59 pm

Nice blog!! ajax and wordpress, this is an inspiration!!

Apr 18, 2010 at 4:17 am

If you want an appropriate fallback for browsers that aren’t supporting any of these techniques simply define a plain background-color before you define the gradients (e.g. background-color:#ccc;)

Apr 18, 2010 at 2:20 pm

Nice. Love the menu bar.

Nashville Website Designer
Apr 18, 2010 at 8:29 pm

Excellent technique. Cross browser is getting easier all the time. I’d be interested to see numbers on cross-browser frontend development time. I know I’ve spent waaaaaaay to many hours on it myself.

CPO - Drupal
Apr 19, 2010 at 10:04 am

Wow very nice collection! thank you very much.

Matt Anderson
Apr 19, 2010 at 12:13 pm

This is great! I have been looking for a way to take gradients from images to code. I knew you could do it, but my knowledge of “heavy code” is pretty limited. I love it though.. thanks for sharing!

Apr 19, 2010 at 2:25 pm

Hi, dear!
I really loved this post! I was looking for something like this. But…. I was testing and in my Opera, and it didn´t appear anything… =(

Someone could give a hand on it?


Rabaya Bagum
Apr 19, 2010 at 10:56 pm

I wonder whether it is possible to get gradient in horizontal direction?

Apr 20, 2010 at 3:58 am

I try to follow the examples already. Results have recently been encouraging.

Apr 20, 2010 at 4:00 am

Work is not different. Based on competency of users.

Florida web design company
Apr 20, 2010 at 9:43 am

Wonderful! Trying it on a website.. will update if I come up with anything new. Thanks!

Michael Mior
Apr 20, 2010 at 10:13 am

This doesn’t seem to work in Firefox 3.5.9 :(

Apr 20, 2010 at 10:58 am

There is a really nice PHP class that will create gradient image on the fly – I’ve used it a few times for my css backgrounds. I’m sure with a little skill the class can be expanded to have more options and patterns.

Apr 21, 2010 at 2:56 pm

Very cool.

Apr 22, 2010 at 5:50 am

Thanks – will try it on a website soon!

Nick Dunn
Apr 22, 2010 at 8:42 am

@Michael Mior, the introduction states “but now with the Firefox 3.6+…” — it isn’t supported in any older Firefox version.

Apr 24, 2010 at 3:15 am

thx for gradient tips

Guilherme Voigt
Apr 24, 2010 at 5:11 pm

Im using Coda for codding in my 2 macs, but this gradient thing didnt seem to work. All my browsers re updated! I get a STRANGE result!!!

Guilherme Voigt
Apr 24, 2010 at 5:16 pm

well, problem solved :) i was previewing in an empty document. LOL

Apr 25, 2010 at 12:57 pm

io solitamente acquisto on line , mi piace perche acquisto da casa , ho molta scelta e posso confrontare i prezzi , l ultimanente ho acquistato una FOTOCAMERA REFLEX NIKON su , unsa samsung , ricevuta a casa , bellissimo ……

Fotografia Ślubna Gdańsk
Apr 26, 2010 at 9:35 am

Very useful tut. Thanks a lot!

Cristian Ferrari
Apr 26, 2010 at 2:32 pm

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′, EndColorStr=’#999999′)”; /* for IE8 */

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′, EndColorStr=’#999999′); /* for IE6 & 7 */

Apr 28, 2010 at 8:00 pm

This is great, but when it first loads the gradient does not fill up the whole screen initially. It vertically repeats the gradient like venetian blinds (different row heights across browsers) and then when the rest of the page loads it corrects itself. Unfortunately I can’t show you what is happening because the site is not live. It’s like I need a preloader or something. I tried a div that covers the page and then hides it with body onLoad, but that didn’t work. Any ideas?

Jul 8, 2012 at 7:36 pm

Ming, did you get an answer to your venetian blind gradient problem? My cross-browser gradient works fine if I set it from topright to bottomleft, but on straight topto bottom, I get the blinds. And it doesn’t go away. Help?

Web Design
Apr 28, 2010 at 9:41 pm

Love it thank yOU@

Apr 29, 2010 at 3:42 pm

Waouh, very nice, thank you au lot !

Andy Griffiths
Apr 30, 2010 at 10:55 am

Nice, thanks. Always like the use of a good gradient from time to time. Was taught in university not to use gradients in design for some reason but I like them and think they can work well when implemented correctly and appropriately.

May 1, 2010 at 5:41 am

ho trovato dei buoni sconti su voi ne conoscete altri ?

May 4, 2010 at 7:21 am

The above code is very good for all website developer but, I just want to know can we use this code in horizontal way?
If it is possible to make it. thata will be great code forsoever for all website developer.


Pao Im
May 4, 2010 at 9:58 pm

filter: progid:DXImageTransform.Microsoft.gradient in script bellow not work in IE 7:
table = document.createElement(‘table’);
tbody = document.createElement(“tbody”);

tr = document.createElement(‘tr’);
tr.setAttribute(‘valign’,’top’); “filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=” #B554FF”, endColorstr=” #B554BB”)”;

Could you help to solve the issue above?
Many thanks,

May 8, 2010 at 6:27 am

Not working in opera 10.53 there is only a gray color…

zubair sota
May 10, 2010 at 4:28 am

gr8 comment.. thanx alot

May 12, 2010 at 10:04 pm

the ie 7.0.6 doesn’t work with the crazy grediant which applied to the “tr”
Anybody know how solve it?

Web Design Seo
May 17, 2010 at 1:15 am

Thanks for sample code For Webkit Browsers.

Satish Borkar
May 18, 2010 at 2:44 am

gr8 post
thanks for sharing
anyway whole web design is going to dynamic now will be more fun to worl with CSS 3 & HTML 5

George Lucas
May 18, 2010 at 3:33 pm

Thanks for sharing going to use on my site on the next update here Thanks again!

May 18, 2010 at 5:13 pm

Your menu example is great. Thx!

Jun 6, 2010 at 12:26 pm

Thank you so much my friend. I rarely find blog posts as useful as this one. Anyone that wants to see this code In action on can check it out here: . It’s a gradient from #FFFFFF to #E8E8E8.

Again, thanks for the awesome post.

Jun 10, 2010 at 7:37 am

Wonderful menu!

Jun 10, 2010 at 8:40 pm

you forgot one thing… IE 8 changed the property to -ms-filter and the filter command is in quotes.

Jun 11, 2010 at 9:57 am

SVG in combination with background-size is missing. If done correctly, it should work in Opera.

Jun 14, 2010 at 10:24 pm

thanks for the tutorial. but chrome (chromium) 6+ (that only i test) have small bug in inset.

Design Hippo
Jun 16, 2010 at 2:51 am

Interesting tutorial. Keep up the good work

Freelance Website Design
Jun 17, 2010 at 6:41 am

not working in ie6…

Jun 30, 2010 at 9:39 pm

Why did you even bother to check IE6? Anyone who still uses IE6 (and is not being forced to) is, quite frankly, a moron.

Danny Internets
Jul 5, 2010 at 6:45 pm

This does not work in the current version of Firefox (3.5.10).

Jul 6, 2010 at 4:53 am

tnx :) very simple and very helpfull…

Jul 8, 2010 at 5:10 am

@Danny Internets: Really? 3.5.10 is the current version of Firefox? What about 3.6.6? BTW, Firefox 4 beta is out…

code pixelz media
Jul 8, 2010 at 5:17 am

Nice article. Thanks for taking time to create this article.

Jul 8, 2010 at 7:46 am

Not really “cross-browser” if your proposed hack doesnt work in Opera. ;)

If you’re a professional web designer: stop hacking and wait till an implementation is released by W3C.

Jul 15, 2010 at 10:08 am

Works great in IE, Chrome, and Safari.
Does not work well in Firefox.

Willie Hartman
Jul 16, 2010 at 1:37 am

Excellent and informative. Thanks for taking the time, don’t worry about those who don’t appreciate the effort.

Jul 17, 2010 at 2:45 pm

Hahahhahaah. IE 6.

Jul 19, 2010 at 8:21 pm

tha’s simple and usefull… thanks…

Jul 27, 2010 at 7:38 pm

Hahahhahaah. IE 6.
it uses the filter:?

anyway, really helpful.
i just searched for gradients with alpha support, but rgba and #00000000 in the filter did it.

Jul 29, 2010 at 5:28 am

I’m finding this works real sweet if you want to get earlier versions of IE working –
Jul 29, 2010 at 5:48 pm

Thanks, exactly this is I was looking for! One mention: the picture gradient is also cross browser and can be dithered which is a litle bit better.

Jason Williams
Jul 30, 2010 at 2:20 pm

Thanks so much for these tips. It’s incredible that IE doesn’t support so many things when it comes to CSS. I hope soon they realize the importance of this. Why do they refuse to cooperate with things that other browsers support?

Some Funky Dude
Aug 1, 2010 at 9:27 pm

Very nice, thanks for sharing.

Aug 6, 2010 at 4:32 am

Filter doesn’t seem to work in IE. What ever I change the hexadecimal value too it still renders blue.

Aaron S
Aug 15, 2010 at 8:43 pm

When this filter is applied in IE, text smoothing is disabled (tested in IE8), which is not so nice for users with text smoothing enabled as it’s a very obvious difference in text rendering, the best option here may be to have a fallback background image for browsers other than Firefox, Chrome, and Safari. This would be done by specifying the background image as the background property as the fallback in the example above.

Felix Nagel
Aug 16, 2010 at 4:14 am

Cross browser? Does not work in latest Opera and Chrome on Win.

Aug 16, 2010 at 6:28 pm

thanks, very usefull

Aug 19, 2010 at 10:56 am

very helpful. clear and to the point, with no obfuscation. thank you!

Adam Clark
Aug 19, 2010 at 11:03 am

Is there a way to give a gradient to text (not a background gradient).

Aug 23, 2010 at 9:01 am

Nice one. It is a really useful.

Aug 26, 2010 at 11:21 am

Wow the CSS Gradient Dropdown Menu example is amazing. Too bad it’s hosed in IE 7- but absolutely amazing that you can achieve that w/out the use of images.

Great work!

Sep 4, 2010 at 2:43 pm

Thank’s a lot for all tutorials and tips

Sep 7, 2010 at 5:19 am

Awesome post, just a small bug I’ve discovered on IE 8 – Gradients with a border cut out the bottom border for some reason.. If anyone know’s a fix that would be great :)

Sep 8, 2010 at 4:58 pm

It still amazes me that we’ve come all this way with CSS3 and we still can’t standardize on presentational code.

Sep 24, 2010 at 1:11 am

An issue here is that when you put the gradient into a div, and do a border-radius onto it for IE (whether using IE9 beta standard support or a JS solution like curvy corner) the gradient is not stopped by the rounded edge so you end up with a the gradient display over the rounded border. Is there anyway around this??

ospop shoes shop
Sep 24, 2010 at 4:32 am

Wonderful menu!

Sep 27, 2010 at 6:03 am

Thanx its awesome script. Gradient in IE was the major problem but using this sceript that problem is solved thanx a ton.. :)

Lauren O'Donovan
Sep 28, 2010 at 5:44 pm

Thank you so much for the great tutorial!

Oct 6, 2010 at 9:04 am

The style is working in ie7 perfectly but not in ie6.Do i need to have some other setting.

Oct 7, 2010 at 4:32 am

Chikezie you complete and utter moron. You really should do a little reading before exposing your stupidity so openly.

Oct 7, 2010 at 9:55 pm

I was reading something else about this on another blog. Interesting. Your position on it is diametrically contradicted to what I read earlier. I am still contemplating over the opposite points of view, but I’m tipped heavily toward yours. And no matter, that’s what is so great about modernized democracy and the marketplace of thoughts on-line.

Oct 9, 2010 at 11:47 am

lovely site, very informative

Oct 19, 2010 at 8:47 am

Very useful & nice. Love!

Oct 28, 2010 at 8:20 am

ovely site, very informative, Thank you so much for the great tutorial!

Las Vegas Web Design Company
Oct 29, 2010 at 3:09 am

very nice it..good work.

Nov 13, 2010 at 1:43 am

Thank you for the useful information, however, you didn’t include how to differentiate between a horizontal or vertical gradient in IE: filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=’#cccccc’, endColorstr=’#000000′); for horizontal, and replace the 1 with a 0 for vertical. Here’s my source:

Thank you!

Nov 16, 2010 at 2:49 am

To all those who can’t figure it out – it doesn’t work in Opera. O. does not support css gradient yet. This article is a bit flawed, for not mentioning this at all.

You CAN get a nice gradient without a bitmap though, using SVG (w/h 100%/100% and a gradient of your choice) as a background-image. ;) If you use the same start/stop colors, it’ll look exactly the same as in webkit/Firefox using css3.

The Best-Best of me
Nov 26, 2010 at 12:36 pm

Awesome tutorial, thanks for this bro.

Nov 29, 2010 at 6:44 pm

Your post is very nice and insightful. Have just started implementing this feature.

Dec 1, 2010 at 12:19 am

When you do article marketing, your intention is to increase the number of visitors to your website. It is not our abilities that show what we truly are, it is our choices. I have look for such a article for a long time

Dec 2, 2010 at 8:39 am

Tnx for this incredible post! You saved me a lot of hours!! (y)

Dec 4, 2010 at 9:17 am

Thanks for this, awesome css script.

Jeff Sebring
Dec 11, 2010 at 2:26 am

Thanks for the demo. Maybe someday Exploder will render css correctly.

I wonder how many thousands of hours have been wasted trying to get web sites to look right on this horrible, horrible browser . .

Zain Shaikh
Dec 22, 2010 at 3:57 pm


Henry Peise
Dec 24, 2010 at 5:13 am

Want to change your belove iphone 4 form black to white? Hmm, yes, so am I. but when will white iphone 4 available?

Juno Mindoes
Dec 25, 2010 at 2:51 am

I just heard the gossip that since there’s some technic problems on white iphone 4, iphone 4b is going to release. It that true?

Dec 26, 2010 at 10:19 am

Thanks a lot, this helped me greatly!

Jan 1, 2011 at 6:38 pm

Does not work in IE 7–in fact in your example, the popout menus in the drop down do not display.

Ryan Vars
Jan 2, 2011 at 2:42 am

your gradient code doesn’t work on on IE 8.
Thanks for the great article thought.

Max Williams
Jan 3, 2011 at 5:11 am

I had a beautiful gif background gradient on a very simple login page. Worked well with everything but Firefox. It was all striated! Yuk!

Now it’s terrific in FF, IE, and Safari. Plain background in Opera and Google, but they don’t really matter for now.

This code worked from the get-go. Fabulous. Thanks heaps!

Max Williams (aka maxzebra)

Jan 6, 2011 at 1:06 am

Thank u very much, i am upset for last 1 week thanks thanks……… this helped me greatly!

Jan 6, 2011 at 1:54 am

This is something what I was finding from so many days and finaly got it here. It has been a great help of your that you have shared a great and helpful post here.

Los Angeles Web Design

Daniel M
Jan 7, 2011 at 3:01 pm

use endColorstr=’white’ instead of endColorstr=’fff’.

For some reason it likes to make white black.

Jan 8, 2011 at 10:53 pm

Following code for Firefox.
background:url(“../logo.png”) no-repeat scroll 0 10px,-moz-linear-gradient(center top , #212327, #424448);

I want to use background image and gradient both in IE.
What is IE compatibiliity code for this?

Jan 9, 2011 at 10:26 am

Is this compatible to safari?

Jan 11, 2011 at 11:59 am

excellent! Had no idea you could gradient with just CSS in ie7/8!

Uçak Bileti
Jan 11, 2011 at 3:39 pm

hasret kanımda

Manish Runwal
Jan 12, 2011 at 2:10 am

How to make these things valid for validation of css3 ?

ft leonardwood
Jan 12, 2011 at 2:36 pm

Brilliant, as usual. Well explained, the gradients worked fro me the first time. I am super ADD too so this is a big task. :)

Jan 15, 2011 at 3:32 am

I must admit that I enjoyed reading your creative article as you did put pen and paper together to write such a flowing article

Jan 17, 2011 at 9:44 am

how about Opera.??

Jamie R
Jan 21, 2011 at 11:26 am

Thanks for posting this article. I was almost ready to give up and go back to button images rather than gradients. You saved me a lot of time.

Jan 26, 2011 at 10:47 am

Daniel — I think the problem is that IE doesn’t like it when you try to use the abbreviated 3 digit hexcode for the color, as compared to the full 6 digit code. Try ‘ffffff’ instead of ‘fff’ and it should work!

Jan 27, 2011 at 12:58 am

I want left to right gradient.

Feb 3, 2011 at 2:59 pm

This is a really great problem resolved, because cross-browsing it is a big issue at this point.
But i don’t see how you can control the gradient’s dimensions, or -for instance – to repeat or not, to take 80% or 100% of background’s height – maybe you have an ideea?

Feb 8, 2011 at 6:57 am

i just visited this website right now and find it nice . the design, i was really amazed on how did they make it possible to build a site like this. is there a tutorial on how something like this site could made possible. example is this comments list. showing comments the way it shows here was really creative. is there some one who could give idea on how to build something like the way the comments shows here. the design was really amazing

Feb 9, 2011 at 4:57 am

1321423 rq 214 132

css splash
Feb 14, 2011 at 6:12 am

Is left – right gradient possible? Web Design Inspiration Gallery

Feb 17, 2011 at 8:19 am

Really a great tutorial, i used this gradient effect. Thanks a lot dude!

Feb 21, 2011 at 9:08 am

Wow, great tip! Thanks for sharing, using this for checkout buttons without images for my shopping system :D.

Red Blue Websites
Feb 23, 2011 at 6:04 pm

Just what I needed right now. Thanks.

Mar 4, 2011 at 12:59 pm

really interesting gradient and the code works like a charm!
this cross-browsing issue it’s a very sensitive one, i have a lot of trouble with all these versions of browsers…

Mar 13, 2011 at 9:19 pm

This article will prove useful to many people.
However, the IE filter will only work for versions 5.5 to 7. You need the -ms prefixed version for IE8.
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#cccccc’, EndColorStr=’#000000′)”;

Mar 15, 2011 at 6:07 am

This week Opera releases version 11.10 with css gradients support :)

What about IE9 ??

Mar 15, 2011 at 1:45 pm

Many thanks for sharing, nice tip..

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:14 pm

Your updated dropdown menu in the demo using CSS gradient is amazing!

How To Get Taller | How To Put On A Condom
Mar 17, 2011 at 5:15 pm

This article taught me how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Must read! From blog to blog!!!

Mar 24, 2011 at 6:25 am

Dropdown menu looks cool in browsers. In IE9, li’s don’t take the border-radius, so they are plain rectangles.. Just another thing that is great but you cannot use it generally without a hack. Thank you, microsoft! Maybe in IE10.

Website Design Sheffield
Mar 24, 2011 at 10:07 am

This is perfect, thanks solved my problem straight away :)

Mar 24, 2011 at 4:25 pm

Thanks a lot! I had some display problems with Chrome but now they’re solved. You are my hero :D

Mar 29, 2011 at 10:34 am

hey aleare, did chrome just automatically stop your gradient and begin again halfway down your page? if so how did you fix it? thanks :D

Mar 29, 2011 at 9:59 am

Great information about the Gradient! Right to the point. I exactly needed this multibrowser gradient code.

Thank yOu

Mar 30, 2011 at 5:18 am

Fantastic! Thanx a mil. I would have tried x-repeating a pixel wide image, lol.

Mar 30, 2011 at 7:48 am

Cheers for this, having some problems with firefox4 repeating a vertical gradient however.

Aaron Zipagan
Mar 31, 2011 at 8:53 pm

good one! very helpful! Thanks!

Aaron Zipagan
Mar 31, 2011 at 8:54 pm

by the way, really love your site!

Apr 1, 2011 at 5:45 pm

Awesome trick. Thanks!

Eddie Rowe
Apr 5, 2011 at 10:43 am

I can’t get webkit to render a gradient on the ≤html≥ level element. Is this to be expected? It works in FF and IE. How do I fix?

Apr 6, 2011 at 3:22 am


Apr 6, 2011 at 8:04 pm

Awesome trick. Thanks!

Apr 8, 2011 at 7:09 pm

Very nice. Especially the menu! Can’t wait to implement this on my site!

Apr 12, 2011 at 11:11 pm

hello ,
My name is daniel and I own nigerian forum
I’m an ardent reader of your posts and not just to leave leave without writing a comment this time around, I love the informations you share through this post especially where you wrote ” 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. ”
Keep it up friend.

Apr 17, 2011 at 1:34 pm

Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.

Apr 18, 2011 at 1:21 am

Great Fix !!

Apr 18, 2011 at 7:12 pm

Anyone know when IE will step up to the plate and support color-stop, gradient angle, and radial gradient so we can do the cool menus in IE as well? First it was fonts and now this – so frustrating.

Apr 19, 2011 at 10:00 am

Had no idea this could be done with CSS, thanks!

Apr 20, 2011 at 1:02 am

This works perfectly, thank you. I would like to use it as the background of a website, which also uses a watermark image centered in the background, but it does not seem to be working. Is this not possible with a gradient?

Andrew Myers
Apr 21, 2011 at 2:55 pm

I used your CSS button gradient page to perfect some buttons at and found through testing that the IE gradient syntax does not recognize CSS color shortcuts. For example if you call #eee you get no results, but #eeeeee works fine. Just FYI.

Jun 22, 2011 at 9:01 am

thanks Mike, good spot!

Srinivas Thammineedi
May 5, 2011 at 1:02 am

Really it is very useful for who are looking to implement gradients with using css. I love your site a lot Great combination of colors and font. Great trick. Thanks a lot

May 7, 2011 at 2:56 am

Thanks for this tutorial, works fine for me :)

May 11, 2011 at 3:43 am

Internet explorer gradient is not working in ie8. Other wise every thing is good.

May 13, 2011 at 4:06 am

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′)”;

May 16, 2011 at 6:49 pm

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?

May 17, 2011 at 2:14 pm

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

Jun 6, 2011 at 5:07 am

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.

Jun 22, 2011 at 3:47 pm

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.

May 25, 2011 at 5:44 am

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!

Jun 12, 2011 at 5:29 pm

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

Mont Blanc Pen
Jun 13, 2011 at 9:49 pm

What is friendship?Mont Blanc PenWhy do we call a person our friend? When do we call someone a very good friend?

Jun 18, 2011 at 12:03 am

Thank you for this article.
It’s seems in Opera doesn’t work css gradient.

spring valley vitamins
Jan 20, 2012 at 4:57 am

Thank you. for this articles.:)

Jun 29, 2011 at 2:49 am


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

Jul 4, 2011 at 6:59 am

Thank Man.

Darian Brown
Jul 6, 2011 at 1:20 am

Just a heads up on a typo under the “For Internet Explorer” section. You typed wlil instead of will.


Jul 8, 2011 at 3:50 am

Thank you for that very interesting.

Jul 9, 2011 at 2:24 am

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?

iphone 1st gen
Jul 13, 2011 at 10:39 am

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.

Jul 15, 2011 at 11:44 am

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
background: -ms-linear-gradient(left top, #017AC1, #00bcdf);

hope you found this helpfull

Barbara Tallent
Mar 12, 2012 at 10:44 pm

Thanks Tim! I just tried our site on IE10 and was baffled by the whole gradient thing. Your info worked great!

Jul 15, 2011 at 4:35 pm

This is verry good
Jul 17, 2011 at 2:59 pm

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

Jul 20, 2011 at 2:28 pm

Thanks for the cross-browser one, it was just what I needed.

Jul 22, 2011 at 7:25 am

How to make gradient for IE from left to right, NOT from top to bottom

Gemini Shadows
Jul 25, 2011 at 4:08 pm

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.

Jul 25, 2011 at 1:04 pm

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 ?

Jul 25, 2011 at 10:54 pm

Great work. Keep it up !

Dallas Web Designer
Jul 27, 2011 at 7:24 pm

Thanks for the tips. I used this in one of my designs today ;)

Greg McGee
Aug 5, 2011 at 10:39 pm

Thanks for this snippet! Works like a charm with no alteration.

Aug 9, 2011 at 5:13 am

Don’t follow these blindly anymore. All major browsers support official syntax for CSS gradients.

Use something like:

No need for old webkit crap (unless you really want to stay compatible with old webkit).
And “filter” might be useful too as IE supports CSS gradients from version 9 only.

Aug 15, 2011 at 11:45 am

Agreed witz Diz, this solution is everything but cross-browser. It uses a filter for IE, and two vendor-specific prefixes for webkit and firefox … you cannot get any less cross-browser.

Aug 16, 2011 at 6:34 am

are you an idiot or just not know what your talking about?

Sep 12, 2011 at 11:09 pm

I dunno, just putting the 3 lines in the post didn’t work in every browser for me, but after using Diz’s method it worked.

Sep 28, 2011 at 7:45 pm

Look at the date of the post before complaining that something doesn’t work. In the world of web browsers and CSS3 support, do you really expect a post that’s over a year old to still be completely valid?

Aug 18, 2011 at 3:02 am

Thanks for the Gradient Tips I Used for an Tool Tip and it’s working fine.

Ather Rehan
Aug 19, 2011 at 6:14 am

That was amazing….
But what for Opera and safari ? :(

Aug 19, 2011 at 1:29 pm

See: Safari IS built on webkit

Juvy Cagape
Aug 25, 2011 at 1:33 am

Best post, with using this trick I think no need to use ‘canvas’ tag of HTML5 if you want browser compatibility, cheeeeers.

xbox 360
Aug 25, 2011 at 11:22 pm

Thanks for the information of interest.

Ravi Thakur
Sep 1, 2011 at 12:57 am

thanks.. this solve my problem..

Sep 12, 2011 at 4:17 pm

Sure solved my IE woes!!! Thanks for a great post!

Sep 17, 2011 at 5:23 am

Thanks for this code.

Sep 17, 2011 at 11:22 am

thank you! good post.
have a quick question. is it possible to load a image if the browser is non css type? and how to do it? thank you again!

Sep 27, 2011 at 8:01 am

thanks for this code…

André Thiago
Sep 28, 2011 at 12:17 pm

Very useful tips!!! Thanks for sharing this.

Khaled Bin A Quadir
Oct 2, 2011 at 7:05 am

Thanks :)
It’s a great CSS3 feature!

Oct 4, 2011 at 6:34 am

Here’s a complete example;

background: #e0e0e0;
background: -moz-linear-gradient(top, #e0e0e0 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#fff));
background: -webkit-linear-gradient(top, #e0e0e0 0%,#fff 100%);
background: -o-linear-gradient(top, #e0e0e0 0%,#fff 100%);
background: -ms-linear-gradient(top, #e0e0e0 0%,#fff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e0e0e0′, endColorstr=’#fff’,GradientType=0 );
background: linear-gradient(top, #e0e0e0 0%,#fff 100%);

custom tailor
Oct 4, 2011 at 6:56 am

nice tip…..

Oct 6, 2011 at 8:55 am

Thanks, nice tip used today.

toilet roll holder
Oct 16, 2011 at 8:28 am

That’s a great step-by-step tutorial. Thanks for sharing your knwledge!

Oct 18, 2011 at 5:27 am

Im trying to apply a gradient as a background to a table row but this does not seem to work in IE. My implementation does not allow me to use a gradient image. Any suggestions please

Oct 25, 2011 at 8:59 pm

IE Sucks big time – everyone get Mozilla or Chrome
Freaking IE sucks

Nov 3, 2011 at 7:16 am

No mention of Opera’s approach. A shame to see another dev article ignoring what is a solid and very innovative browser.

Nov 13, 2011 at 9:40 am

Solid and innovative, fine, but it has about the same market percentage right now as IE6.

Jan 13, 2012 at 8:37 pm

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.

Jan 25, 2012 at 3:22 pm

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

Feb 1, 2012 at 6:47 am

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.

Nov 23, 2011 at 3:55 am

What about you Marilize ? Do you suck big time ?

Oct 31, 2011 at 8:05 am

Thanks a lot !, this was very help full

Nov 1, 2011 at 9:56 am

great , just great

worked perfectly.

now to find a rounded corners hack for IE.


Nov 13, 2011 at 9:40 am


Nov 1, 2011 at 4:18 pm

>now to find a rounded corners hack for IE.

I recommend this
Works like a clock.

Imran Naqvi
Nov 14, 2011 at 4:56 am

no gradient in opera

Dec 26, 2011 at 6:26 am

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 */

Jan 12, 2012 at 9:40 am

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

Feb 3, 2012 at 1:27 am


Nov 2, 2011 at 7:21 am

Rounded corners are easily created in IE9 as in the following line of css example:

border-radius:15px; //for IE9 and Opera
-moz-border-radius:15px; //for firefox

Try on other browsers to see how it works.

Adam Pery
Nov 5, 2011 at 1:44 pm

See nice custom menu line-gradient example here:
It is really helpful

Nov 17, 2011 at 6:34 am

great work thanks

Nov 24, 2011 at 9:18 pm

Well done, Thank you

Nov 28, 2011 at 9:39 pm

Kill IE!

Elijah Clark
Dec 6, 2011 at 5:47 pm

thanks, been looking for this all day.

Bradley Collins
Dec 22, 2011 at 3:00 pm

thanks… very helpful for seasons greeting background let me try this…

Dec 23, 2011 at 4:21 am

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?

Dec 23, 2011 at 4:22 am

Oh and pie will eventually give you problems down the way, and modinizir is useless too…….

Dan Avery
Dec 24, 2011 at 12:40 am

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!

sap netweaver
Dec 31, 2011 at 7:22 am

Thanks! this was helpful. How do a get the gradient to appear from left to right for IE?

Jan 16, 2012 at 11:57 pm

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?

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.

spring valley vitamins
Jan 20, 2012 at 4:32 am

definitely, a BIG BIG deals.thx, for article

Jan 21, 2012 at 9:26 am

Damn on u IE !!

Jan 26, 2012 at 6:39 am

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.

Feb 9, 2012 at 1:13 am

not work at opear….

Feb 9, 2012 at 1:16 am

@Serwat sorry its works….

Feb 10, 2012 at 5:52 am

Opera browser was missed,
i use this for all browsers, tested on :
IE 8.0 , FireFox 12.0 , Chrome 18.0 , Opera 12.0

background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5ac), color-stop(100%,#fff));
background: -moz-linear-gradient(top,#5ac,#fff);
background-image: -o-linear-gradient(#5ac,#fff);

Jared - Regina Web Design
Feb 19, 2012 at 9:47 pm

Very nice. Any idea on how to do cross background gradients and also use a background image?

Mar 30, 2012 at 4:43 am

I can’t answer to your question, but why don’t you use for example: 2 s

Feb 21, 2012 at 1:45 am

Is there a way to control when the gradient effect begins and where it ends? I want it to make the transfer earlier…


Mar 30, 2012 at 5:32 am

I tested this:

mozilla-> background: -moz-linear-gradient(50px, #FFF, #000);
the gradient starts at 50th pixel from left to right
1st pixel->#FFF background color ->50th pixel -> gradient to the right end of the element
background: -webkit-gradient(linear, 0 120, 0 180, from(#F00), to(#000));
linear gradient from top to bottom -> first 120 pixels are #F00, from 121px to 179px is the gradient, then from 180px to the end of the element the color is #000
background: -webkit-gradient(linear, 120 0 , 180 0, from(#F00), to(#000));
same as above, but from left to right

Apr 20, 2012 at 4:55 am

So how would I do a gradient from top to bottom so that the bottom gradient starts at 50% for -moz? If I set -moz-linear-gradient(50%, #FFF, #000); it is from left to right, but I want it to go from top to bottom…

May 11, 2012 at 1:12 am

Hi Bianca, in case you’re still looking for a solution, simply inform at what point you want the gradient to start (the XX%):
background: -moz-linear-gradient(top, #cccccc XX%, #ffffff);

May 18, 2012 at 11:55 pm

i think i found the answer to your question

May 18, 2012 at 11:56 pm

Feb 29, 2012 at 4:15 pm

What if I wanted to have two gradients on the same element… Taking the example above, what if I wanted to extend it by having white gradient into black on the top AND bottom? Is this even possible?

Mar 30, 2012 at 5:53 am

/* The old syntax, deprecated, but still needed with the -o, -ms and -webkit prefixes*/
background: linear-gradient(top, blue, white 80%, orange);

mizilla 10
/* The new syntax needed for Firefox 10 onwards, with the -moz prefix */
background: linear-gradient(to bottom, blue, white 80%, orange);

May 13, 2012 at 2:41 am

Felt so hopeless looking for answers to my qusiteons…until now.

Mar 30, 2012 at 5:57 am

background-image: linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -o-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -moz-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -webkit-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -ms-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);

background-image: -webkit-gradient(
left bottom,
left top,
color-stop(0.47, #000000),
color-stop(0.74, #00FF00),
color-stop(0.87, #FFFFFF)

Brian Wrightson
Mar 3, 2012 at 11:22 am

Really useful; thanks!

Rajesh Jha
Mar 5, 2012 at 3:54 am

How can i use multi gradient in same element. plz give me solution.

Mar 30, 2012 at 5:58 am

As I told to Rich:
background-image: linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -o-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -moz-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -webkit-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);
background-image: -ms-linear-gradient(bottom, #000000 47%, #00FF00 74%, #FFFFFF 87%);

background-image: -webkit-gradient(
left bottom,
left top,
color-stop(0.47, #000000),
color-stop(0.74, #00FF00),
color-stop(0.87, #FFFFFF)

Martin @ Web Task Technologies
Mar 6, 2012 at 3:28 pm

This is awesome. No more need for a big image editing program!

Mar 11, 2012 at 5:52 am

nice one. still mad at ie flops

Mar 20, 2012 at 1:23 am

hmmm ..Thanks really very useful .. :)

Mar 22, 2012 at 10:30 am

I think the systax for Firefox 10+ has changed, which is bad because all firefox browsers need the the -moz prefix.

Apr 10, 2012 at 4:11 am

For anyone interested in a gradient generator that creates the SVG code (required by IE9) for ANY CSS linear or radial gradient, see There’s a free and a cheap version.

Apr 10, 2012 at 12:12 pm

One big thing which is missing is from this article which you can do these days is stacking of multiple image values (aka gradients) in a single background.

For example:
background-image: linear-gradient(left, rgba(0,0,255,0), rgba(0,0,255,1)), linear-gradient(top, #FFF, #000);

If you want to explore the potential of multi-layered gradients check out: (use a webkit browser).


Apr 12, 2012 at 4:33 pm

This doesn’t work quite as expected when applied to the body element:

body {
background: #F00000; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #000000); /* for firefox 3.6+ */

In Chrome, I get a gradient down to the end of whatever is filling the body, then it repeats the gradient until the bottom of the window. Is there a way to extend the gradient to the bottom regardless of the content? And also to have it be similar to a background url in a no-repeat fashion so the gradient covers the current window size, and the content of the page can scroll without scrolling the gradient? Currently, I can do this with a some javascript, but it would be nice if it worked with the CSS styles.

Example of issue @

Apr 15, 2012 at 5:10 am

Same problem for me. It seems fine the first second but when my website are fully loaded the gradient starts to divide. :(

Francis Boudreau
Apr 25, 2012 at 12:57 pm

Wonderful tip.

Apr 26, 2012 at 4:44 am

I came across the weirdest effect with this gradient application. when applied IE8 creates kind of a “knockout” effect on my text. in otherword i can see right through my text to the background image.

iam creating flip cards with css3 trasition and animation. and when the card flips there are buttons on the back of the card the buttons have a class applied to it with the gradient. and white text. but the text and border creates the knockout effect in ie8….. any suggestions on what my be causing this?

Apr 26, 2012 at 1:22 pm

Thanks for article. I used your filter code for Explorer and I can now see my gradient background in my header. I inserted the filter code into my footer CSS b/c it also uses a gradient background, but some reason it’s not showing up still on Explorer.

Any idea’s?

May 15, 2012 at 5:39 am


May 20, 2012 at 5:05 pm

Sorry guys, but how do i apply the ie code so that the gradient goes from left to right instead of top to bottom. Any help would be greatly appreciated. Thanks.

May 24, 2012 at 4:22 am

but this gradient not working on opera browser

Andrew Jackson
May 26, 2012 at 11:56 am

You did a great job, thanks a lot.

May 29, 2012 at 7:54 pm solve the day!

Thanks a Lot!

May 30, 2012 at 10:44 am

hmmm… The css dropdown menu doen’t work for IE 7 :-(

Meera and Jaideep Kibe
May 30, 2012 at 12:05 pm

Hi, I loved your site.
I want to create a linear gradient for the background/viewport. I am able to successfully do the linear gradient in divs. and other such containers. Mt problem is how to make the linear gradient stretch in the background

Jun 23, 2012 at 3:27 am

You can apply the background in the body tag like:

…Your gradient background css code here :)

Aug 9, 2012 at 4:45 pm

Thanks TechbulletsPH. Top man :)

Ric Torres
Aug 1, 2012 at 3:24 pm

The problem with background gradients is often that they must either be a fixed width (100%) or must be set to auto, which then ruins the relative size-ability of its child divs. My solution was to give ALL parents a 100% height, starting with
html,body { position:absolute; top:0; left:0; height:100%; width:100%; /* and gradient goes here */
Once this is set, the gradient starts over after 100%, so to keep everything contained
.body_double {
overflow:scroll; /* the fun begins!!! */
overflow-x:hidden; /* no thanks, sideways scroll */
.container { /* parent div to all percentage-sized contents. */
HEIGHT:98%; /* now I can safely place a 2% height footer, outside of this div, that stays at the bottom of .body_double */
margin:0 auto;
text-align:center /* for IE centering */
.MainLeft { /*first child to .container*/
.MainRight { /*second child to .container*/

Footer goes outside of .container and has a 2% height, but remains within .body_double, your gradient is fixed while appearing fluid, and your page scrolls at the y-axis. THE ONLY Setback I can find, is that a scroll bar is inevitable. So far, this is the best answer I can find for a background gradient at 100% while also maintaining a re-sizable child div. Anybody who knows an easier way is my hero.

Ric Torres
Aug 1, 2012 at 6:36 pm

I meant to say “fixed height” above, at the very beginning…

Ric Torres
Aug 3, 2012 at 6:17 pm

I take it back. That was a stupid solution. Against my own will, I tried a fixed position background image (1px by 1800px) repeat-x, using the background-size:contain rule. Much more success. The fixed position image in the background allows inner divs to be any length, because it stays as the full-size background no matter how scroll works.

Jun 7, 2012 at 4:34 am

I tried using your pure css navigation bar and the colors when you hover over something or when a button is set to current does not work in Google Chrome. Is there a remedy to this?

Jun 8, 2012 at 4:31 am


I left a comment a couple of months ago regarding a program I’ve written that can generate the CSS and SVG code for all possible CSS linear and radial gradients.

The good news is, I’ve since learnt Javascript and converted the program to an online web app at

You will need a modern browser to view the page. If you use IE, you’ll need IE9+, which can handle SVG graphics. If you have the IE10 preview, you’ll be able to see the output in both CSS and SVG.
All other browser users should be fine assuming that your browser version is pretty much up to date.

If you have any comments, then please email me at the address provided on the web page.


Jun 12, 2012 at 1:34 am

This was really helpfull for me.Thank a lot.

Jun 13, 2012 at 8:42 am


Jun 18, 2012 at 5:27 am

can you help me for making text gradient masking.

Jun 19, 2012 at 9:26 pm

thank u for this code ,, thank u very much.

abhisekh ranjan
Jun 20, 2012 at 1:34 am

can it work with magento

Jun 20, 2012 at 8:11 am

Thanx a ton…

Jul 5, 2012 at 4:47 am

hi, i want gradient to be supported by all browser types.
Please help me.

Georgi Yankov
Jul 13, 2012 at 12:30 am

Thanks, very useful article and well explained!

Jul 15, 2012 at 12:28 am

ok,thanks,very good

Jul 20, 2012 at 5:47 am

is there a way to create a gradient background without the use of -moz-?

Jul 25, 2012 at 7:34 pm

what if you what a gradient with multiple colors? How do you put that into the code?

Jul 27, 2012 at 10:55 am

Yay finally found a code that works in all browsers – been having a hell of a morning trying to get this figured out. Thanks :)

Yates de lujo en Ibiza
Aug 1, 2012 at 3:28 pm

The good news is, I’ve since learnt Javascript and converted the program to an online web app at

You will need a modern browser to view the page. If you use IE, you’ll need IE9+, which can handle SVG graphics. If you have the IE10 preview, you’ll be able to see the output in both CSS and SVG.
All other browser users should be fine assuming that your browser version is pretty much up to date.

If you have any comments, then please email me at the address provided on the web page.

Aug 4, 2012 at 6:51 pm

Thank you.. Thank you.. Thank you..

Aug 9, 2012 at 9:30 pm

Thanks so much, awesome tutorial!

Aug 10, 2012 at 4:07 am

OK thanks

Aug 19, 2012 at 7:51 am

Very useful! Thank you

Aug 19, 2012 at 2:31 pm

That is awesome. Thanks so much for posting that. I was just about to get into photoshop to create the old school gradiant image that is a nightmare when vertical as it’s never the right length and I thought to myself, now that was years ago we had to do that. Perhaps there is a CSS technique by now. And there you were, thanks mate


Alquiler yates Ibiza
Aug 20, 2012 at 3:50 am

Thanks so much for posting that. I was just about to get into photoshop to create the old school gradiant image that is a nightmare when vertical as it’s never the right length and I thought to myself, now that was years ago we had to do that.

Aug 20, 2012 at 11:24 am

This is actually great! I have been searching for this a long time.

Aug 28, 2012 at 11:23 am

you forgot about Opera.
i use this solution

Aug 29, 2012 at 8:31 am

Thanks for the great advice and tutorial! I did find that Opera was left out of the picture and the same gradient effect is achievable via:

background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200)); /* Opera CSS3 */


Oct 8, 2012 at 6:19 am


Aug 30, 2012 at 6:18 am

Thank you, very usefull!

Aug 30, 2012 at 8:47 am

Thanks for the post.
want to know more on this topic.

Aug 31, 2012 at 5:04 am

You forgot about IE 8 that uses -ms-filter for god knows what reason…
Ex: -ms-filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#550000FF, endColorstr=#550000FF

The weird hex code coulours (with 8 digit instead of 6) is just for transparency…
I got this at

Sep 14, 2012 at 10:01 am

i just want to make it 334 (comments) …and awesome tutorial

Sep 21, 2012 at 1:09 am

many thanks man, it really help me a lot :)

Sep 24, 2012 at 6:30 pm

tyty. was just about to revert to using a photoshop gradient image as a background which likely would of looked horrible and taken much more time :s

Nov 15, 2012 at 2:19 pm

Thanks for this. I got the gradient css for IE to show up, however, it does not validate under the W3C standards.

Nov 25, 2012 at 1:48 pm

work all browser very nice. thanks

Nov 27, 2012 at 4:59 am

Thank you so much brother.

May 29, 2013 at 2:04 am

However, in IE, the background won’t stay fixed, extends the length of the body and doesn’t seem to respond to the background-position 0px 100px. Any advice on a workaround would be greatly appreciated.

Jun 1, 2013 at 2:39 am

hello sir
i really like the CSS site
thanks for sharing this blog

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.