CSS3 Gradients

I love CSS3 gradients… but I just can’t remember the syntax for both WebKit and Mozilla. That means, any new project I start where I want to use gradients, I run a Google search. One of the top results for CSS3 gradients is css-tricks.com. It’s a great article, but the Mozilla gradient example is over-complicated. Also, the two colors are in different orders between moz and webkit.  Personally, I think the top color should be on the left… for BOTH examples. So, more for my own personal reference, here’s a simplified CSS3 gradient code.

background:#ccc;

background: -webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#eee));

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

IE gets no gradient…. because, come on.

Leave a Reply