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.

342 Comments

Zia Rahman
Apr 14, 2010 at 5:57 am

I loved it. Thanks for posting this.

Alex
Apr 14, 2010 at 6:05 am

A nice little technique!

Thorsten
Apr 14, 2010 at 6:23 am

Cool. Thanks for posting this.

Manuel
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

naran_ho
Apr 14, 2010 at 7:34 am

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

nelojin123
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).

Laurent
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.

Greg
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.

Boris
Apr 14, 2010 at 4:58 pm

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

hawkman
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. :-/

Massimo
Apr 14, 2010 at 6:20 pm

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

Tami
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.

Seiichi
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.

Hiro
Apr 15, 2010 at 4:22 am

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

Alexander
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 http://www.w3.org/TR/2009/CR-css3-background-20091217/#backgrounds (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.

nazpro
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.

Thiago
Apr 15, 2010 at 8:32 pm

Amazing.

Hope to see more!

Joe
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!

Felicity
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?

David
Apr 16, 2010 at 4:55 am

Come on IE – get with it! :)

Cook
Apr 16, 2010 at 3:37 pm

wonderful stuff…….

Marty
Apr 16, 2010 at 6:06 pm

Thanks!

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!!

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

Lee
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!

Louise
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?

Tks!!!

Rabaya Bagum
Apr 19, 2010 at 10:56 pm

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

gclub
Apr 20, 2010 at 3:58 am

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

sbobet
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 :(

Max
Apr 20, 2010 at 10:58 am

There is a really nice PHP class that will create gradient image on the fly http://planetozh.com/blog/my-projects/images-php-gd-gradient-fill/ – 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.

Lee
Apr 21, 2010 at 2:56 pm

Very cool.

cleawalford
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.

asd
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

marina
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 http://www.tecmania.it , 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 */

Ming
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?

jb
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@

Mikael
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.

vanessabionda
May 1, 2010 at 5:41 am

ho trovato dei buoni sconti su http://www.tecmania.it/ voi ne conoscete altri ?
grazie

Ganesh
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.

Thanks,
Ganesh

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’);
table.setAttribute(‘cellspacing’,’0′);
table.setAttribute(‘cellpadding’,’2′);
tbody = document.createElement(“tbody”);

table.appendChild(tbody);
tr = document.createElement(‘tr’);
tr.setAttribute(‘valign’,’top’);

tr.style.cssText= “filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=” #B554FF”, endColorstr=” #B554BB”)”;
tbody.appendChild(tr);

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

steve
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

Sun
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!

fan
May 18, 2010 at 5:13 pm

Your menu example is great. Thx!

Jarad
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: http://artists.me/members/profile/admin . It’s a gradient from #FFFFFF to #E8E8E8.

Again, thanks for the awesome post.

pit
Jun 10, 2010 at 7:37 am

Wonderful menu!

stovak
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.

Thany
Jun 11, 2010 at 9:57 am

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

TMUkmkd
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…

NightKev
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).

def.
Jul 6, 2010 at 4:53 am

tnx :) very simple and very helpfull…

tdpt
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.

Florian
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.

Lisa
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.

Justin
Jul 17, 2010 at 2:45 pm

Hahahhahaah. IE 6.

kai
Jul 19, 2010 at 8:21 pm

tha’s simple and usefull… thanks…

david
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.

Sniffer
Jul 29, 2010 at 5:28 am

I’m finding this works real sweet if you want to get earlier versions of IE working – http://css3pie.com/

Weblap.ro
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.

David
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.

Sławek
Aug 16, 2010 at 6:28 pm

thanks, very usefull

Andrew
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).

D.A.J
Aug 23, 2010 at 9:01 am

Nice one. It is a really useful.

jeff
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!

MB
Sep 4, 2010 at 2:43 pm

Thank’s a lot for all tutorials and tips

Ron
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 :)

Chikezie
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.

crashfellow
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!

Deepti
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!

Grande
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.

Craig
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.

mary
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.

yereverluvinunclebert
Oct 9, 2010 at 11:47 am

lovely site, very informative

Kobeef
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 ..like it..good work.

Adrian
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: http://technet.microsoft.com/en-us/library/ee692647.aspx

Thank you!

Xupicor
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.

Sayela
Nov 29, 2010 at 6:44 pm

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

Mr.willsons
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

Koos
Dec 2, 2010 at 8:39 am

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

jeterboy
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

Coool.

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?

Matija
Dec 26, 2010 at 10:19 am

Thanks a lot, this helped me greatly!

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

shyam
Jan 6, 2011 at 1:06 am

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

Melvins
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.

Dhan
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?

gtagamer
Jan 9, 2011 at 10:26 am

Is this compatible to safari?

Jon
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. :)

Ben
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

chekwan
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.

HeaterHut
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!

shyam
Jan 27, 2011 at 12:58 am

I want left to right gradient.

seo
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?
Tanks!

joe
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

li
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

Newlineinfo
Feb 17, 2011 at 8:19 am

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

Vector
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.

seo
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…

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

pneumatig
Mar 15, 2011 at 6:07 am

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

What about IE9 ??

Sarah
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!!!

mine
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 :)

Aleare
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

harv
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

Ranjeesh
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

TheCyberBug
Mar 30, 2011 at 5:18 am

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

decia
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!

Mike
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?

2
Apr 6, 2011 at 3:22 am

3

MyBB
Apr 6, 2011 at 8:04 pm

Awesome trick. Thanks!

Simon
Apr 8, 2011 at 7:09 pm

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

Daniel
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.

dexx
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.

Atul
Apr 18, 2011 at 1:21 am

Great Fix !!

Heather
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.

Rob
Apr 19, 2011 at 10:00 am

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

Eric
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 http://www.geoffreymyers.com/correspondence..html 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.

mark
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

Kyper
May 7, 2011 at 2:56 am

Thanks for this tutorial, works fine for me :)

Dinesh
May 11, 2011 at 3:43 am

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

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

Linda
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?

Kevin
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

Matt
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.

michael
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. http://msdn.microsoft.com/en-us/library/ms532879(v=vs.85).aspx

alan
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!

Jared
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?

OnLine
Jun 18, 2011 at 12:03 am

Hy,
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.:)

Oswald
Jun 29, 2011 at 2:49 am

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

Dee
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.

Cheers,
D

SEO
Jul 8, 2011 at 3:50 am

Thank you for that very interesting.

Manisha
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.

TimKola
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
/*IE10*/
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!

orhanbt
Jul 15, 2011 at 4:35 pm

This is verry good

bankaciyim.com
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

Logan
Jul 20, 2011 at 2:28 pm

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

jumancy
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.

geo
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 ?

Franz
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.

diz
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:
-webkit-linear-gradient(…)
-moz-linear-gradient(…)
-o-linear-gradient(…)
-ms-linear-gradient(…)
linear-gradient(…)

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.

Franky
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.

really
Aug 16, 2011 at 6:34 am

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

npc
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.

Dated
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?

Karunakar
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 ? :(

Lin
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..

Tieson
Sep 12, 2011 at 4:17 pm

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

Devendra
Sep 17, 2011 at 5:23 am

Thanks for this code.

commend
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!

devendra
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!

thetoast
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…..

Biltong
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!

Morne
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

Marilize
Oct 25, 2011 at 8:59 pm

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

Mitya
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.

Ron
Nov 13, 2011 at 9:40 am

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

Chris
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.

Rissy
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

Gary
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.

Marilon
Nov 23, 2011 at 3:55 am

What about you Marilize ? Do you suck big time ?

Kunal
Oct 31, 2011 at 8:05 am

Thanks a lot !, this was very help full

Garfield
Nov 1, 2011 at 9:56 am

great , just great

worked perfectly.

now to find a rounded corners hack for IE.

G

Ron
Nov 13, 2011 at 9:40 am

CSS3PIE

Alex
Nov 1, 2011 at 4:18 pm

>now to find a rounded corners hack for IE.

I recommend this http://css3pie.com/
Works like a clock.

Imran Naqvi
Nov 14, 2011 at 4:56 am

no gradient in opera

rizwanabbasi
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 */
background-color:#124f7e;

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

MAAZ
Feb 3, 2012 at 1:27 am

IS IT SUPPORT FOR IE7 – 8 – 9

O'Dejoye
Nov 2, 2011 at 7:21 am

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.

Adam Pery
Nov 5, 2011 at 1:44 pm

See nice custom menu line-gradient example here:
http://www.xhtml.co.il/en/Tools/Linear-Gradients-Custom-Menu
It is really helpful

Pav
Nov 17, 2011 at 6:34 am

great work thanks

John
Nov 24, 2011 at 9:18 pm

Well done, Thank you

fjjiaboming
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…

Thomas
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?

Thomas
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?

seolsearchkaty
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?

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.

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

definitely, a BIG BIG deals.thx, for article

Nik
Jan 21, 2012 at 9:26 am

Damn on u IE !!

Serwat
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.

shishir
Feb 9, 2012 at 1:13 am

not work at opear….

shishir
Feb 9, 2012 at 1:16 am

@Serwat sorry its works….

kb667
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-color:#55aacc;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#55aacc’,endColorstr=’#ffffff’,GradientType=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?

Ivo
Mar 30, 2012 at 4:43 am

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

Oren
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…

Thanks,
Oren

Ivo
Mar 30, 2012 at 5:32 am

I tested this:

mozilla-> background: -moz-linear-gradient(50px, #FFF, #000);
result:
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
—————————————————————————————————-
Chrome
background: -webkit-gradient(linear, 0 120, 0 180, from(#F00), to(#000));
result:
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));
result:
same as above, but from left to right

Bianca
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…

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

jayson
May 18, 2012 at 11:55 pm

i think i found the answer to your question

jayson
May 18, 2012 at 11:56 pm

http://css-tricks.com/examples/CSS3Gradient/

Rich
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?

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

Dora
May 13, 2012 at 2:41 am

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

Ivo
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(
linear,
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.

Ivo
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(
linear,
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!

ifeanyi
Mar 11, 2012 at 5:52 am

nice one. still mad at ie flops

Rohini
Mar 20, 2012 at 1:23 am

hmmm ..Thanks really very useful .. :)

Craig
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. https://developer.mozilla.org/en/Using_gradients

Jules
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 http://www.visualcsstools.com. There’s a free and a cheap version.

Glan
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:
http://glan.github.com/CSS-Patterns-Workbench/#2301441 (use a webkit browser).

and

lea.verou.me/css3patterns/

mouse
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+ */
margin:0;
height:100%;
width:100%;
}

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 @ http://tamaratemple.com/cgi-bin/gradient-example.cgi

Caroline
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.
Thanks!

gavin
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?

Bryan
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?

Lam
May 15, 2012 at 5:39 am

Awesome!

Con
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.

raj
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.

Ailton
May 29, 2012 at 7:54 pm

Bro..you solve the day!

Thanks a Lot!

Chris
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
Thanks

TechbulletsPH
Jun 23, 2012 at 3:27 am

You can apply the background in the body tag like:

body{
…Your gradient background css code here :)
}

streamdr
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 {
height:100%;
width:100%;
overflow:scroll; /* the fun begins!!! */
overflow-x:hidden; /* no thanks, sideways scroll */
}
.container { /* parent div to all percentage-sized contents. */
width:90%;
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;
float:none;
text-align:center /* for IE centering */
}
.MainLeft { /*first child to .container*/
position:relative;
HEIGHT:100%;
width:66.666667%;
float:left;
clear:left;
}
.MainRight { /*second child to .container*/
position:relative;
HEIGHT:100%;
width:33.333%;
float:left;
}

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.

Wolfgang
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?

jules
Jun 8, 2012 at 4:31 am

Hi,

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 visualcsstools.com.

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.

Cheers,
Jules

Gayatri
Jun 12, 2012 at 1:34 am

This was really helpfull for me.Thank a lot.

eliph26
Jun 13, 2012 at 8:42 am

Thanks!:)

abhishek
Jun 18, 2012 at 5:27 am

can you help me for making text gradient masking.

Devendra
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

Rajesh
Jun 20, 2012 at 8:11 am

Thanx a ton…

lavanya
Jul 5, 2012 at 4:47 am

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

Georgi Yankov
Jul 13, 2012 at 12:30 am

Thanks, very useful article and well explained!

pouya
Jul 15, 2012 at 12:28 am

ok,thanks,very good

Alexa
Jul 20, 2012 at 5:47 am

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

K
Jul 25, 2012 at 7:34 pm

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

Logan
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 visualcsstools.com.

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.

Uds
Aug 4, 2012 at 6:51 pm

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

Scotty
Aug 9, 2012 at 9:30 pm

Thanks so much, awesome tutorial!

Patrice
Aug 10, 2012 at 4:07 am

OK thanks

security
Aug 19, 2012 at 7:51 am

Very useful! Thank you

Rich
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

Rich

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.

Sam
Aug 20, 2012 at 11:24 am

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

brian
Aug 28, 2012 at 11:23 am

you forgot about Opera.
i use this solution

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

Thanks!

Sanjay
Oct 8, 2012 at 6:19 am

Hiiiiiiii

lbt
Aug 30, 2012 at 6:18 am

Thank you, very usefull!

himu
Aug 30, 2012 at 8:47 am

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

CockpitSeeker
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 http://stackoverflow.com/questions/2293910/css3-transparency-gradient

vagabond
Sep 14, 2012 at 10:01 am

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

djanggo
Sep 21, 2012 at 1:09 am

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

Chloe
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

Ivan
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.

Zainal
Nov 25, 2012 at 1:48 pm

work all browser very nice. thanks

OammieR
Nov 27, 2012 at 4:59 am

Thank you so much brother.

kombi
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.

DymoLabels
Jun 1, 2013 at 2:39 am

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

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.