I’ve been doing a lot of work lately with CSS3 and all that it offers. Gradients have really been fun to work with but can be a little confusing at first if you are unfamiliar with them. This is mostly due to the fact that not all browsers support them and you have to work a little voodoo magic to get them to look the way you want.
The more I work with them the more I like them. Today I’m going to focus on the basics and how you can quickly start working with CSS3 Gradients.
Cross browser support
The first and most important thing to think about when delving into the new world of CSS3 is making sure you provide a consistent user experience from browser to browser. I’ve argued that the majority of your users will never notice, meaning a user who uses IE7 probably doesn’t often use Firefox or Chrome, but to me cross browser support is like a puzzle and one that I love to work on.
On a side note if you use IE at your office and run Windows feel free to install Firefox because it doesn’t write to your registry and therefor will more than likely pass your companies IT securities. Do this at your own risk. It’s always good to check with your corporate IT policy before installing anything, but as they say it’s easier to ask for forgiveness than permission. 
The CSS
To start we will create a basic gradient that will fill the body and act as our background.
body {
/* IE and none awesome browser support */
background:url(path/to/image.jpg) 0 0 repeat-x;
/* Firefox support */
background:-moz-linear-gradient(top, #ccc, #eee);
/* Chrome/Safari support */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#eee));
}
In the above example I specify background 3 times. The first is a standard CSS2.1 use where we display an image. This will be displayed to anyone using a legacy browser.
Mozilla (Firefox)
The second example is for Mozilla Firefox and is by far the easiest to use:
background:-moz-linear-gradient(top, #ccc, #eee);
The first thing to note is how you reference the gradient.
-moz-linear-gradient();
With Firefox you specify that the gradient will be linear, meaning from one point to another in a straight line. If you are familiar with javascript then this surprisingly starts to look like a function — which only occurred to me recently as I’ve learned more about Javascript and PHP style languages, but I’m slower than most people.
The next part specifies the “top” property meaning we are starting our first color from the top and moving downward. From there we specify our starting color and ending color. In our example our starting color is “#ccc” and our ending color is “#eee”.
Webkit (Chrome/Safari)
The third example is for Webkit based browsers. This typically covers Google Chrome, Safari, and Mobile Safari.
background:-webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#eee));
The Webkit version is a little more complex, but arguably gives you more fine control over the gradient position.
-webkit-gradient();
You should notice that calling the style is different than the Firefox version in that you specify “linear” as a parameter rather than in the name. After specifying which type of gradient you want you then list out the points “Left Top” and “Right Bottom”. Similar to the firefox version you next specify the “from()” color and “to()” color.
In Closing
I have really enjoyed playing with gradients on the web, and while they aren’t supported in earlier version of modern browsers or IE, it’s always a good idea to get familiar with these new concepts. If there is one thing I’ve learned it is always important to get ahead of new information and not be struggling to pick it up when it’s in demand.
I’ll make sure to go deeper into this topic in the future so keep checking back for updates. Also, if there is something specific you are interested in learning let me know in the comments.
