By , October 2010

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( [ || ,]? [ || ,]? , [, ]* )
Mozilla (Firefox)

Same as W3C (but with -moz-)


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

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

WebKit (Safari, Chrome)
Bit different.

-webkit-gradient(,  [, ]?,  [, ]? [, ]*)

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);
}
linear.jpg

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);
}
radial.jpg

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

« Login vs Sign In 10 iPhone apps from Northern Ireland you should check out »