CSS:Linear gradients syntax

Having just worked through the differences in radial gradients syntax between WebKit and Firefox I thought that the linear gradients would be simpler, but apparently that's not the case. While WebKit has a standard syntax for both types of gradient, Firefox uses completely different approaches for linear as opposed to radial gradients.

1. Syntax for CSS Linear Gradients

Here you can see the basic syntax which will work in Safari 4 (WebKit) and Firefox 3.6a (Gecko) browsers:

background: -webkit-gradient( linear, , , from(), to() ); background: -moz-linear-gradient( , , );

You can see already from the difference in syntax that the Firefox linear gradient implementation is slightly more limited. You can only specify a single point (or angle) and the gradient will start from there and move to the opposite side/corner.

The WebKit syntax lets you specify specific points for the gradient to start and end. Before and after these points the first/last colours will continue.

2. Basic linear gradient examples

Here we have a simple example with the gradient starting in the top left corner of the box with white and ending at the bottom right corner with black:

background: -webkit-gradient( linear, 0 0, 100% 100%, from(white), to(black) ); background: -moz-linear-gradient( top left, white, black );

Often with background gradients you will want them to appear only at the edge of the element so as not to obscure any text or images. To do this in WebKit we just move the start point to somewhere further across (down) the element. For Firefox, however, we can use the trick of repeating the first colour as shown here:

background: -webkit-gradient( linear, 0 50%, 0 100%, from(white), to(lightblue) ); background: -moz-linear-gradient( top, white, white, lightblue );

The results are more or less identical in both browsers. Again, you need to be using either Safari 4 (including iPhones) or Firefox 3.6a (alpha release) to be seeing these effects.

3. Adding more colours to the gradient

To add intermediary colours WebKit uses the same method as for radial gradients with the color-stop syntax. Different colours can be inserted at points along the gradient with from() and to() being equivalent to color-stops at 0 and 1.

In Firefox it seems that the gradient always covers the entirety of the element, but they've introduced a short-hand to replace the color-stops, allowing us to achieve similar effects. Colours listed without placement information are evenly distributed over the remaining space, as you can see below:

background: -webkit-gradient( linear, 0 50%, 0 100%, from(white), color-stop(0.5, yellow), to(red) ); background: -moz-linear-gradient( top, white 50%, yellow, red );

Again, the results are more or less identical in the two browsers.

4. Repeating/tiling linear gradients

In WebKit we're able to tile the background gradient by defining it's dimensions. In this case we have a diagonal gradient from white to lightblue that has been repeated 10 times across the element:

background: -webkit-gradient( linear, 0 0, 100% 100%, from(white), to(lightblue) ); -webkit-background-size: 10% 100%;

Firefox allows for something slightly different. Rather than tiling a slice of the gradient, the gradient can be repeated to infinity. here you can see how that works:

background: -moz-repeating-linear-gradient( -45deg, white 0, lightblue 10% );

And for the browser-impaired here are the screenshots from Safari 4 and Firefox 3.6a. You can see that their implementations are quite different:

5. Related Articles