One of the difficulties faced by CSS3 beginners is understanding its complex syntax.  To make matters worse, different browsers and browser versions use different syntax to achieve identical results. To ilustrate this please consider the Linear Gradient, one of the properties of CSS3. The most frequently used form looks like this:

 

 

Linear gradient syntax

There are many variations of the syntax that enable you to add a Liner Gradient to a site. They can be divided in two major categories:

• linear-gradient
• -webkit-gradient 

linear-gradient syntax:

background-image: linear-gradient([<point> || <angle>, ]? <stop>, <stop> [, <stop>]);

<point> is the starting point of the gradient. Possible values can be "Left, Right, Center, Top, Bottom", number, percentage, or a combination of these.

<angle> can be deg, rad, or grad. A more detail explanation of how the angle works can be found here

If <point> and <angle> is not provided, the default is "Center Top". If only one of them is provided,  the other parameter will default to "Center". For example "Left" will be default to "Left Center".

<stop> is used for changing the colors of the gradient. A minimum of two stops is mandatory, though the user can provide as many stop as he wants. <stop> can also include an additional number as percentage representing the position of the changing color.

Syntax examples of linear-gradient:

linear-gradient(#FFF, #AAA);
linear-gradient(top ,#FFF, #AAA);
linear-gradient(left ,#FFF, #AAA);
linear-gradient(right bottom, #FFF, #AAA);
linear-gradient(50px 50px, #FFF, #AAA);
linear-gradient(100% 10px, #FFF, #AAA);
linear-gradient(45deg, #FFF, #AAA);
linear-gradient(10rad, #FFF, #AAA);
linear-gradient(#FFF, #CCC, #AAA, #999);
linear-gradient(#FFF, #CCC 50%, #AAA 100px, #999);
linear-gradient(left bottom, #FFF, #CCC 50%, #AAA 100px, #999);

-webkit-gradient syntax:

This syntax is supported in Safari 4+, Chrome 1+.

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

<type> can be linear or radial.

The first <point> is the starting point and second is the ending point. Points can be specified as a number, percentage, or keywords similar to the <point> in linear-gradient. Both points are mandatory.

<radius> can be specified only when <type> is radial, but we are not going to cover that in this blog. 

<stop> supports two different syntaxes:

•  from(...) ~ to(...)
  • Accept color code as the only parameter.
• color-stop(...).
  • Accepts two parameters, decimal value from 0 to 1 and color code.

Syntax examples of -webkit-gradient:

-webkit-gradient(linear, 0 0, right bottom, from(#000), to(#FFF))
-webkit-gradient(linear, 20 30, 100% 100%, from(#000), to(#FFF))
-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, #000), color-stop(1, #FFF))
-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, #000), color-stop(.5, #AAA), color-stop(1, #FFF))

Did you know?

The CSS3 gradient does not always have to look strictly "gradient". Checkout the following example:
background-image: linear-gradient(left, #FFF, #FFF 20%, #CCC 20%, #CCC 21%, #FFF 21%, #FFF)

This creates a border on the left side. Using this technique wisely, one can create a lot of interesting background patterns using only CSS3.

Pro and Cons

There are a lot of advantages for using CSS3 gradient over the traditional image gradient method such as shorter development time, easier maintenance, and faster page load times. The big down side, of course is the lack support by some browsers. Currently supported browsers are Safari 4+, Chrome, Firefox 3.6+ and Opera 11.10+. Yes, IE9 (STILL!) and under does not support the CSS3 gradient.  As an alternative one can use IE’s own filter feature, trying to mimic the same result. However, that is not recommended since it has limited functionality and its difficult to maintain.

Conclusion

The linear gradient and CSS3 in general has a complex syntax that may feel overwhelming at times. However, it does provide us with a lot of power to achieve a lot of neat tricks quickly, faster load times for our webpages, and easier maintenance.  Come back for more CSS3 pointers.