CSS: Linear gradients syntax

 Tweet0 Shares0 Tweets5 Comments

Having already worked through the differences in the radial gradients syntax between WebKit and Firefox browsers I thought that the linear gradients would be simpler, but apparently that's not the case. Now the situation is even more convoluted.

Firstly, we have the original (WebKit) specification, for a single -webkit-gradient capable of describing both linear, radial and (with some tweaking) a form of repeating gradient.

The WebKit syntax has now been replaced by a new (Mozilla) format including four different options for linear, radial and repeating gradients. This has now been adopted by most browsers, including Opera 11 (except for repeating gradients) and Internet Explorer 10.

Before being (CSS3) finalised, however, we can expect a further minor change to the specification where directions are specified using an explicit to instead of an implicit from to indicate direction, so as to match the effect of setting an angle for the gradient.

In the following examples we try to include equivalent styles using each format where possible.

Syntax for CSS Linear Gradients

Here you can see the original syntax which will work in Safari 4 and Chrome (WebKit), and the new format which works also in Firefox 3.6a (Gecko) browsers, and now in Opera 11.10. Finally the proposed unprefixed syntax:

From the difference in syntax you can see that the Mozilla linear gradient implementation is perhaps more limited, but much more user friendly. You can only specify a single point (or angle) and the gradient will start from there and move to the opposite side/corner or at a specified angle.

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. Points are specified either with two percentage values (<across> <down>) or two integers representing pixels, but without the 'px' suffix.

In the WebKit syntax case a color stop is comprised of a color (name, hex, rgba) and an optional percentage (0-100) or decimal value (0.0 to 1.0) where from is equivalent to a color-stop with 0.0 and to to a value of 1.0. In the new syntax the distance value can be specified using pixels, ems or a percentage. You can see some examples below.

WebKit browsers now support both the -webkit-linear-gradient option and the -webkit-repeating-linear-gradient option identical to the Mozilla syntax. They also plan to keep the old -webkit-gradient for the forseeable future and it is the only version that currently works on iOS 4 devices.

Basic linear gradient examples

In the box below we have a simple example with a gradient starting in the top left corner of the box with white and ending at the bottom right corner with black. You can see both the old and new WebKit syntax and the equivalent for other browsers:

Note that the syntax is likely to change, again, replacing top left (specifying the origin point) with to bottom right (specifying the destination point), as shown on the last line.

It's also possible to specify an angle for the gradient rather than a direction. Zero degrees (0deg) creates a left-right gradient while 90deg creates one going from bottom to top. To duplicate the above effect then we specify an angle of 315deg (equivalent to -45deg):

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 we can also use the trick of repeating the first colour as shown here:

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.

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:

The linear-gradient syntax is equivalent to placing colour stops as: white 50%, yellow 75% and red 100% as the stops without percentage or distance values will spread out equally to fill the remaining space.

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

Repeating/tiling linear gradients

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

Firefox (and now WebKit) 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:

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:

Repeating gradients are not yet supported in Opera 12.

Some useful tricks

Column background:

In a table-less layout it's often difficult to include a coloured background from the top of the page to the bottom without using a graphic.

Here we have created a 160-pixel wide solid background with a hard edge. You can add a hard edge to any gradient just by placing two colour stops at the same location (distance):

Parallel lines

We can also create a series of lines by using a thin repeating gradient. We've used this technique for the background in our sample code boxes and here you can see it slightly more exagerrated:

In this case our gradient goes from a transparent colour, to a light blue with some transparency and then back to full transparency. This is overlayed on a solid background colour.

Cartoon backgrounds

This example was copied from our JavaScript Card Game demonstration:

The pattern consists of diagonal stripes with transparency overlaid on a solid colour, which can easily be changed as it's defined separately.

Pattern tiles

Using the background-size property we can clip and tile gradients to create a background texture:

This would probably work better as a page background rather than a background for text.

Multiple backgrounds

Using multiple backgrounds with css gradients and alpha transparency you can create overlays for photos, or for other gradients as shown here:

In this case we've also fixed one of the gradients so it won't scroll with the page, creating a psychadelic experience when you scroll up and down (not on mobile of course).

References

• Surfin' Safari - Blog Archive » Introducing CSS Gradients
• Gradient Syntax Proposal
• MDN: -moz-linear-gradient - MDC

Related Articles - Gradients

• CSS Linear gradients syntax
• CSS Radial gradients syntax

< CSS

User Comments