CSS3 Linear Gradients

John Allsopp 1st July, 2011 @johnallsopp

It’s been a while since we posted anything particularly technical to the Web Directions blog, but that’s something we plan on changing. Here’s the first in a series of technical articles on CSS3 features (along with tools to help you lean and use them).

We’re starting with linear gradients. We’ll take a look at where they come from, how to use them, and the current level of browser support. Ironically although webkit introduced gradients, until version 5.1, Safari has supported a different syntax from that described here – so, if you are using a version of Safari other than 5.1 (currently in beta) you won’t be able to see the examples.

A little history

webkit first introduced the proposed gradient feature of CSS3 way back in 2008, enabling the browser to generate a gradient to be used where images are in CSS – most commonly as a background image, but also potentially for list items images, border-images, and generated content. Firefox 3.6 followed suit, but introduced a couple of challenges. It introduced a different syntax (now adopted as the proposed CSS3 gradient syntax), and gradients were only available as background images (this restriction is still true today). Not surprisingly, the webkit based Chrome supports gradients, as does Opera since version 11.1 (though only linear gradients (more in a second) are currently supported). What of Internet Explorer you ask? Well, version 10 in fact supports gradients!

Don’t be too alarmed by the two different syntaxes – webkit now supports the same syntax as other browsers, as of Safari 5.1 (we’ll also look at how to ensure maximum browser compatibility in a moment as well).

How they work

Enough history, let’s play with them. There are in fact, as mentioned above, two kinds of gradients (linear and radial gradients). In this article, we’ll focus on linear gradients – and return to radial gradients in an upcoming article.

Gradients aren’t properties (like color), but are a computed values of CSS, something you might not be too familiar with. We use them where we’d typically use a url pointing to an image (most commonly background-image). In essence, the browser generates an image and uses that.

Here’s one in action

OK, so I’ve cheated a little and added a bit more style, but that subtle gradient is all done with CSS. Try increasing the text size – and see how the background gradient continues to fill the element.

Here’s what the CSS looks like.

background-image: linear-gradient(top, #eff6fb, #d3e4f3 68%);

(I said don’t panic for a reason – if you are interested in the underlying concepts, read on. But if you are a more hands-on kind of learner, simply head to the gradient tool I’ve built, and start playing.)

The linear-gradient starts at the top of the element (we’ll see shortly there are other places it can start) and runs vertically to the bottom of the element. At the top, the initial color is #eff6fb. At 68% down the element, the color is #d3e4f3, and the browser generates a gradient image that smoothly transitions from #eff6fb to #d3e4f3. From 68% down the element, to its bottom, the color is a solid #d3e4f3.

gradient in action

BTW, “#d3e4f3 68%” is called a color stop – and gradients can potentially have many stops.

Before we go on, let’s recap. A gradient is value, starting with the keyword linear-gradient, and then containing a number of values inside parentheses. These values specify the direction of the gradient (in this case from top to bottom), a starting color, and then one or more color stops. A color stop is a color value, with an optional length or percentage value (for example, we can have a stop at 1em, 20px and so on).

Here, for example is a gradient with numerous stops

background-image: linear-gradient( left, #FF0000, #FFA500 13.0%,#FFFF00 26.0%,#0000FF 39.0%,#008000 52.0%,#4B0082 65.0%,#EE82EE 78.0%)

The gradient direction

We specify the direction of the gradient in one of two ways. We can specify where it starts horizontally with the keywords left and right, and vertically with the keywords top and bottom. Let’s look at each of these (just follow the link to see each)

We can also combine keywords – to create diagonal gradients from the top left, bottom left, top right and bottom right:

But gradients would be pretty dull if they could only be horizontal, vertical, or diagonal, so there’s a second way to specify the gradient direction-degrees. (You use keywords or degrees, not both together).

To specify a gradient angle, we use the format 90deg (0deg has the gradient start at the left, 90deg at the bottom, 180deg at the right, and 270deg at the top. So, we can think of degrees as going counter-clockwise from 9 o’clock (0deg).)

As usual, the simplest way to understand this is to play with it – so head over to the gradient tool I’ve built expressly for this purpose, and vary the angle to see what happens.

background-image: linear-gradient(126deg, #FF0000, #FFA500 13.0%,#FFFF00 26.0%,#0000FF 39.0%,#008000 52.0%,#4B0082 65.0%,#EE82EE 78.0%)

Repeating gradients

Is your head full of complex stuff yet – color stops, gradient angles, and so on? Well, let’s add to that, with repeating gradients. That’s right, you can repeat a gradient. Here’s how that works. If your last color stop is before the “end” of the element (so, for example if the gradient goes from left to right, the last stop is less than 100% of the width of the element), then the gradient will be repeated from the location of the last color stop. If we have a simple gradient like this

background-image: linear-gradient(0deg, #FF0000, #FFA500 50%)

then we change the value name from linear-gradient to repeating-linear-gradient, then we’ll have the gradient repeat itself from 50% to 100% of the width of the element, like so

background-image: repeating-linear-gradient(0deg, #FF0000, #FFA500 50%)

Forget the math, here’s a tool

As I mentioned above, there’s no need to remember all the syntax and concepts – as I’ve developed the linear gradient tool to make life easier for you. (In fact I significantly overhauled the version I developed something like 2 years ago, to provide widespread browser support, and support the new syntax more fully.)

There are some other good gradient tools out there as well, including ColorZilla. I’ve designed this (and my other CSS3 tools) to closely follow the concepts of CSS gradients, to be as much a tool for learning, as for producing fine looking gradients.

It also has some additional features you might like.

You can tweet a link to a gradient you’ve created by simply clicking a button
You can copy the url of your gradient, and send it to someone via email, put it in a link (like I’ve done for many of these examples) or otherwise share it
Via the magic of HTML5 localStorage, it remembers your most recent gradient, and other settings next time you visit
It adds vendor prefixes for all modern browsers as an option
It adds the start color as a background color for older browsers
There’s a related tool for creating old style Safari gradients
It provides up to the minute browser compatibility information
It looks really pretty, all thanks to CSS gradients of course

So give it a go, and tell me what you think.

Backwards compatibility

Now, you might be asking yourself, what about the backwards compatibility issues with older browsers and are there any accessibility challenges in using gradients? Luckily, gradients are really straightforward to use in an accessible, backwards compatible way, across multiple browsers provided you keep a couple of things in mind.

Firstly, ensure you have a background color (or image) for the element to ensure color contrast with the text. Where gradients aren’t supported, the browser will ignore them, and use the color or image.

At present, all browsers require vendor specific extensions for gradient values. The gradient tool will create those for you. Make sure that you include a gradient value with no vendor extensions, and make this the last of the properties you specify (as we know, if CSS, the last property trumps earlier ones in the rule). So for example

background-color:#AB1364;
background-image: -moz-linear-gradient(114deg, #AB1364, #52FF26 11%);
background-image: -webkit-linear-gradient(114deg, #AB1364, #52FF26 11%);
background-image: -o-linear-gradient(114deg, #AB1364, #52FF26 11%);
background-image: -ms-linear-gradient(114deg, #AB1364, #52FF26 11%);
background-image: linear-gradient(114deg, #AB1364, #52FF26 11%)

For older versions of Safari, we’ll need to have a different background-image property. Not only is the syntax different, the concepts are too, so you might like to use my old style CSS3 Linear Gradient generator to help you out.

And, wth the exception of webkit, gradients are only applicable to backgrounds, (webkit browsers support gradients anywhere images are used.)

Browser Support Notes

A quick summary of current browser support for CSS Linear Gradients.

Safari 4 introduced linear gradients, though as noted with a different syntax from that detailed here. The vendor prefix -webkit- is required for gradients (e.g. -webkit-linear-gradient)
Safari 5.1 introduces the syntax detailed here, as well as continuing to support the older style syntax. Again, the -webkit-vendor prefix is required.
Firefox 3.6 was the first browser to support the current gradient syntax. The -moz- prefix is required, and it’s currently only supported on backgrounds.
Chrome 10 and up (and probably earlier versions) supported the syntax for gradients detailed here. The -webkit- prefix is required.
Opera 11.1 introduced linear gradients, once again with the vendor prefix, -o- required. Currently gradients are only supported on backgrounds.
Internet Explorer 10 also features CSS gradients, using the prefix -ms-, and also only supported on backgrounds.

And just to make life easy, there is talk at the W3C CSS Working Group of changing the syntax yet again.

To do on the Generator

At present, the generator only supports hex color values. Enabling rgba and color keywords (particularly transparent) are important next steps.
Support for multiple background gradients on a single element, used extensively at the CSS Gradient Gallery
Automatic generation of older webkit style syntax.
Taking requests – let me know what you’d like to see

Web Directions Year round learning for product, design and engineering professionals