Everything You Wanted To Know About Gradients (And a Few Things You Didn’t)

17 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Stu Robson

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

  2. John Faulds

    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.

  3. bruce

    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.

  4. David

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

  5. RellyAB

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

  6. Ethan

    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.

  7. Dustin Hansen

    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.

  8. Charlie

    Thanks for this – really clear and concise summation of the gradient syntaxes. Helped me get my head round something I had been putting off understanding for some time!

  9. Hacking my way through

    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!

Impress us

Be friendly / use Textile