A quick intro into CSS3 gradients

28th of October 2010

CSS3 gradients are available to use in Webkit (Safari, Chrome) and Mozilla (Firefox) browsers. They’re not exactly new but I only recently started using them consistently myself so I’ve put together this quick article.

FYI this isn’t the holy grail of CSS3 gradients, it’s more of a reminder for me or quick getting started guide.

Why use CSS3 gradients instead of images?

Gives you more flexibility
Less hassle
Fewer http requests
Scalable

The syntax

W3C

linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Mozilla (Firefox)

Same as W3C (but with -moz-)

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

WebKit (Safari, Chrome)

Bit different.

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Confused yet? Instead of trying to explain what everything means I’m just going to show you some very simple examples.

CSS3 gradient examples

Linear background gradient

html{
  height:100%;
}
body{
  background-color:#440951;
  background-image: -moz-linear-gradient(top, #b032cb, #440951);
  background-image: -webkit-gradient(linear, left top,left bottom, from(#b032cb), to(#440951));
  background-image: linear-gradient(top, #b032cb, #440951);
}

Demo

Radial background gradient

html{
  height:100%;
}
body{
  background-color:#440951;
  background-image: -moz-radial-gradient(center 45deg,circle cover, #b032cb, #440951);
  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#b032cb), to(#440951));
  background-image: radial-gradient(center 45deg,circle cover, #b032cb, #440951);
}

Demo

Body background height problem

Seems that gradients don’t stretch the whole height of the browser window unless you declare the html height. Therefore this is needed:

html{height:100%}

But it doesn’t work in Internet Explorer!

That’s why we have a fall back value in for the background-color which should be enough although you can always use an image if you like.

Have you started using CSS3 gradients yet?

23 Appreciated Comments

On the 28th of October 2010, Mark McCorkell said:
Handy article there Lee for anyone looking to get into some CSS3. I haven’t used CSS3 Gradients much yet, but I have been using quite a bit of the other CSS3 properties, like RGBa etc.
Internet Explorer may eventually catch up, but like you said there… that’s why we have the fallback properties in there. :-)
On the 28th of October 2010, lipelip said:
Nice post Lee,
The thing I don’t like about it is the syntaxe, it’s not really intuitive…
That’s why I recommend this tool from colorzilla, very usefull ;)
On the 28th of October 2010, @JeffreyPia said:
Thanks for the explanation! This property is definitely one of the more difficult ones to wrap my head around.
@lipelip LOVE that Collorzilla tool!!! The only thing I’m worried about is that I’ll use it so much it becomes a crutch and keeps me from completely mastering the code itself. I guess there are worse things to worry about. :-)
On the 28th of October 2010, @hyper_linda said:
Good article, but remember to put the actual css3 property last (that is, after the vendor prefixed ones). That way, when these browsers begin to support the proper syntax they will use these instead of the experimental vendor prefix ones.
On the 28th of October 2010, Derek Johnson said:
css3pie does a pretty good job with linear gradients in IE if you don’t mind a .htc file in your site.
On the 28th of October 2010, Lee said:
@lipelip: Nice tool. Very handy when it comes to using all those stops
@hyper_linda: Good thinking! Changed.
On the 29th of October 2010, Colin @ Slush Puppy Machine said:
Nice article and demonstrations.
Why is IE always playing catchup?
On the 30th of October 2010, Indiadesign said:
Great read! Thanks Lee. Me also started experimenting, still some ingredients pains my head. Anyways your tips are very helpful. Yes, IE may catch up this in the coming future if they want to stay back in the race.
On the 2nd of November 2010, Francois Botha said:
*fewer* HTTP requests
On the 3rd of November 2010, Lee said:
Thanks Francois :-)
On the 5th of November 2010, Dallas SEO said:
I have come to accept that Microsoft and the Internet Explorer browser was sent from hell by the devil himself to slowly erode the creative spirit of web developers everywhere. I tried using a gradient for my nav, but of course I had to have an IE version, and by that point I was just adding another http request, which completely defeated the purpose of using the gradient.
On the 6th of November 2010, Merritts for Hair said:
Great technique! I’ll try to add this in my menu, it might help make the site load faster.
Once again IE let us down! :)
On the 6th of November 2010, Dean said:
Interesting post, actually the first time ive heard of css gradients. The demos didnt work on firefox/mac but did with safari. Wouldnt it be nice if they all just agreed on one format and stuck to it…
On the 9th of November 2010, David Webb said:
This is really useful, I’ve been adding a picture.
On the 12th of November 2010, Chris said:
At work we usually add a…
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#from’, endColorstr=’#to’);
to achieve gradients in IE.
On the 21st of November 2010, Alhadis said:
I’ve been planning on writing a gradient generator myself (as close to Photoshop’s gradient editor as possible, but with a few minor additions). The fact that gradients are heavily visual in nature means you can’t simply sit down and write out the code whilst having a solid idea of what it’ll look like… you need constant feedback to get that right look. That’s why editors are needed (though of course, it never hurts to know the syntax behind it, either. ;))
On the 24th of November 2010, Rick Upshaw said:
I’m embarrassed to say that I had never heard of CSS3 before reading this blog post. The good news, Lee, is that I can credit your website for keeping me on top of the leading edge technology (even though this has apparently been around for a while). I’m particularly interested in anything I can do to make my sites load faster, so thanks for sharing these thoughts!
Is there anywhere I can go online to read up on CSS3, or perhaps an online course you could recommend?
On the 25th of November 2010, Derek Johnson said:
@Rick you should check out Sitepoint’s CSS3 course with John Allsopp. Only costs $10 and he explains it better than anybody else. Plenty of video tutorials too.
On the 25th of November 2010, Alhadis said:
@Rick: http://www.css3.info/
On the 3rd of December 2010, Website laten maken said:
Hello,
This works on IE, search on the internet to pie.php. This can you put in your CSS file and it works!
On the 21st of December 2010, Dave said:
If it doesn’t work in IE then why not just use an image? All the time spent on browsers is sometimes unnecessary and the client inevitably will pick up the tab.
On the 29th of December 2010, Roger said:
I’ve been playing around with CSS3 lately as I’ve been feeling really behind the curve. Thanks everyone for all the great info and especially to you Lee for all the great articles. I always feel I’m getting up on the latest stuff when I come here.
On the 24th of January 2011, erd said:
Very nice, I have to test how this works in older browsers but if it works im sure to use it, thanks