Great article Ethan!! really enjoyed your cander explaining it all. My only ‘gripe’ is more of a suggestion. Perhaps add a “which are not anything to do with CSS3” sentence where you’re discussing Microsoft’s proprietary filters just for a little clarification. Looking forward to your book in 2011. Happy holidays :)

I’ve been using CSS gradients quite a bit in recent months and they do save A LOT of time when it comes to creating images. To bring the same CSS3 goodness to IE, I’ve been using css3pie which lets you use similar syntax to Mozilla’s in your stylesheets.

Just to let you know, in the input button image near the top of the article you say the color is #F47A20 while my color tool says #F47B20. I demand this be fixed >.>

Great article, Ethan. ^_

However, I still can’t believe webkit hasn’t incorporated a way to specify pixel coordinates in the start/stop positions. This makes it really hard to specify a gradient for a page background where you don’t know the height of the body element. You can of course use a container element with a set height, but that just contributes to divitus, and doesn’t need to happen.

Nice article that gives good insight on how different browsers handle this, and how to implement the technique so ‘no browsers are left behind’.. thanx!

Colorzilla has a nice web-based gradient generator that gives you all that moz/webkit/IE markup:

http://www.colorzilla.com/gradient-editor/

Tip-top article.

Note that the spec is changing: Tab Atkins of the CSS Working Group (who works for Google) has written up his proposals that, in my opinion, greatly simplify the syntax http://www.xanthir.com/blog/b49B0

The W3C are also beginning to harmonise CSS and SVG effects such as gradients, transforms etc – you can read more about in Postcards from TPAC which I published a few days ago: http://my.opera.com/ODIN/blog/show.dml/22020902#svg

What the whole syntax-battle has shown is the value of CSS vendor prefixes. Now we can all harmonise on one syntax without -moz, -webkit, or -o and everyone’s lives get easier.

“Tim Van Damme, whose brain, I believe, should be posthumously donated to science”

You’ve probably just become Tim’s favourite person in the world.

The trouble with an article like this is my poor brain (which in no way should be donated to medical science) can only compute how well-written it is, as I know not much about coding. But ‘this article is really nicely written’ sounds like the biggest back-handed compliment going. It’s like going to a game and shouting ‘go sports team!’

It takes real skilled writing to get me to read an article about code of any sort and I did, so, yay!

(As an addendum, can we come up with a complete list of web people who’s brain should be donated to medical science upon their eventual demise?)

Regarding the head-spinning syntax in various engines, I recommend using the Compass framework.

* it has a simple one-line gradient declaration which works in Webkit, Gecko, and also in Opera and IE9.

* it comes with pie integration so you can throw in opaque linear gradients for IE<9

and it makes your life a lot easier. :D

I very much prefer Gecko’s syntax, for the same reasons you mentioned. Although it wouldn’t be a bad idea to leave both syntaxes available.

Thanks for the feedback, all. Glad to hear my modest little primer was helpful to a few people. (And Relly: as someone who would yell “go sports team,” thank you!)

Bruce, thanks so much for the input. I saw Tab’s essay well after I submitted this article for publication (thanks, universe), so I didn’t have a chance to incorporate his comments. Still, it’s really heartening to hear the W3C’s converging on a sensible syntax.

And thanks for the link to Compass, Dira. I don’t use SASS myself, but I’m sure that framework would be handy for those that do.

I think that MS filter is so proprietary as -webkit and -moz.

I’ve slowly been implementing CSS3 into projects this year, and now I have a new tool in the toolbox! Thanks for the well written, easy-to-understand explanation.

You’re a genius and a very nice man to share this. I cut, pasted into my body on my main external css page, changed the color stops and like Christmas morning the gradient I created appeared as the background on all my pages. So this is love, da da la da, so this is love!