Gradient Syntax

Linear gradients are a great feature of CSS3 that, when used properly, can greatly enhance the appearance of your site. They can also be used to replace the traditional method of adding gradients to websites - repeating images, and therefore make page loading times faster. Once you start using them, you’ll also realise how much faster they can make your design process - instead of having to fiddle around with an image editor and upload a new file every time you want to make a change, you can just change a couple of numbers - it couldn’t get much easier than that. Unfortunately, the implementation of gradients differs between webkit & gecko (mozilla) engines, which can be a little confusing, and often means you have to consult a reference to make sure you’ve got it right. For those interested, the mozilla implementation of gradients follows the WC3 specification, while the webkit implementation differs rather greatly.
Here’s the syntax for webkit gradients:

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

And here’s the mozilla syntax:
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Unless you have installed a super smart computer to run along side your brain, chances are that’s all just gibberish to you - it sure is for me. Never mind, though, because once you start using them, it’ll make more sense (hopefully). Each syntax has its own benefits, but personally, I find the gecko syntax easier to remember. So let’s break it down. Starting with the webkit gradient, have a look at the two boxes below to see how to construct a simple 2 tone gradient (hover over the syntax for more information).

-webkit-gradient(typeDefine the gradient type. Accepted values are linear or radial., start-positionTell the gradient where to start. Define the X and Y axis positions of the starting position using either left, right, bottom, top or percentage values., end-positionTell the gradient where to end. Define the X and Y axis positions of the starting position using either left, right, bottom, top or percentage values., from(colour) Define the first colour of the gradient. Accepted values are RGBA, Hex colours or CSS colour names., to(colour) Define the second colour of the gradient. Accepted values are RGBA, Hex colours or CSS colour names.);

And now, here's an example - the code used to generate the background of the container above:

-webkit-gradient(linearDefined the gradient type: linear., left topTold the gradient where to start: at the top left hand corner., left bottomTold the gradient where to end: at the bottom left corner., from(#6a6a6b) Defined the first colour: #6a6a6b., to(#424242) Defined the second colour: #424242.);


And now for the gecko gradients…

-moz-linearDefine the gradient type. Accepted values are linear or radial.-gradient(start-positionTell the gradient where to start. Define the X and Y axis positions of the starting position using either left, right, bottom, top or percentage values., end-positionTell the gradient where to end (optional - if not defined gradient will automatically generate 180˚ from the starting position. Define the X and Y axis positions of the starting position using either left, right, bottom, top or percentage values., colour Define the first colour of the gradient. Accepted values are RGBA, Hex colours or CSS colour names., colour Define the second colour of the gradient. Accepted values are RGBA, Hex colours or CSS colour names.);

-moz-linearDefined the gradient type: linear.-gradient(topTold the gradient where to start: at the top., #6a6a6b Defined the first colour of the gradient: #6a6a6b., #424242 Defined the second colour of the gradient: #424242);

Now for the fun stuff. First, a simple two colour gradient. I find that the best looking gradients are those that simply change the lightness of the one colour - this gives a slight three dimensional feel to the element without being too hard on the eye. So, say you wanted a green background. With CSS3 gradients, we can turn this rather dull background…


…into this much more attractive gradient.

How did we achieve this? Here’s the code:
    background-color: #85c91a;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9ded20), to(#85c91a));
    background-image: -moz-linear-gradient(top, #9ded20, #85c91a);

Due to the fact that only webkit (Safari, Chrome) and gecko (Firefox) browsers support gradients, it’s always a good idea to define a fallback background-color for those browsers that won’t recognise the gradient declaration.

Color Stops

The above methods use just two colours, but using color-stops, we can define as many colours as we want, and their position, to make much more complicated gradients. Look at the graphic below to see how to define color-stops for webkit and gecko browsers.

Discussion

Add a new comment

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License