Web Developer Class: New Syntax for CSS3 Gradients

In 2008, WebKit–an open source project–introduced gradient support for CSS. Back then there were two types of gradient, linear and radial. The syntax follows:

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

That code has been simplified over the years through feedback from web authors. Currently, it has been expanded to include four types instead of two:

• linear-gradient()
  
• radial-gradient()
  
• repeating-linear-gradient()
  
• repeating-radial-gradient()
  

Fortunately, this new syntax does not break currently existing code. So, if you’ve been using -webkit-gradient, none of your previous work needs to be updated.

According to the W3C, a linear gradient is defined as, “A linear gradient is created by specifying a gradient-line and then several colors placed along that line. The image is constructed by creating an infinite canvas and painting it with lines perpendicular to the gradient-line, with the color of the painted line being the color of the gradient-line where the two intersect. This produces a smooth fade from each color to the next, progressing in the specified direction.” In kind, a radial gradient will, “emerge from a single point and smoothly spread outward in a circular or elliptical shape.” More on repeating gradients later.

To use the new enhancements, you still have to prefix the code with -webkit- but after the specification is out of draft form, you’ll be able to drop it.

Here are a couple of examples for linear gradients:

-webkit-linear-gradient(right, blue, black)
-webkit-linear-gradient(bottom left, blue, black)

The default does resort to top, so you can leave out the first argument and still have the code work if you want the gradient effect to start at the top of the box..

Here is the radial example:

-webkit-radial-gradient(white, black)

The above example leaves out the first argument, which defines where the gradient starts, just like the linear gradient. The default is center but you can start the epicenter of the gradient at your preference:

-webkit-radial-gradient(15% 40%, blue, black)

You can even specify the ending radius point and do so separately for horizontal and vertical:

-webkit-radial-gradient(center, 10em 50px, blue, black)

If you want to get fancy with your gradient, you can include several different colors along with stops, which determines when the next color begins:

-webkit-linear-gradient(bottom right, blue 10px, black, red, yellow 80%)

Now back to repeating gradients, which have a similar syntax as the above forms, but they fill in the entire gradient by repeating the stops:

-webkit-repeating-linear-gradient(left, red 10%, blue 30%)

There are some changes from -webkit-gradient to take note of, such that the new syntax uses two-points, which allows you to define where the gradients starts and ends. As a default, the linear-gradient will completely fill in the box for you. But you will need to use a color stop if you want to end the gradient before it hits the edge of the box.

This gradient syntax is now included in the latest Editor’s Draft of the CSS3 Image Values and Replaced Content Module.