A quick intro into CSS3 gradients

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?

1. Gives you more flexibility
2. Less hassle
3. Fewer http requests
4. Scalable

The syntax

W3C

linear-gradient( [ || ,]? ,  [, ]* )

radial-gradient( [ || ,]? [ || ,]? , [, ]* )
</code></pre>

Mozilla (Firefox)
Same as W3C (but with -moz-)

-moz-linear-gradient( [ || ,]? ,  [, ]* )

-moz-radial-gradient( [ || ,]? [ || ,]? , [, ]* )
</code></pre>
WebKit (Safari, Chrome)
Bit different.

-webkit-gradient(,  [, ]?,  [, ]? [, ]*)
</code></pre>

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?

Further reading on CSS3 gradients

CSS3 Gradients
WebKit Gradients
Mozilla Radial Gradients
Mozilla Linear Gradients