The new (and hopefully final) linear gradient syntax

Warning This article was written over six months ago, and may contain outdated information.

The latest Working Draft of the CSS3 Image Values and Replaced Content module was released last month, and contains some changes to the gradient syntaxes — for what you’d hope would be the last time. The updated syntaxes are a little more logical, but offer the same flexibility.

Firefox 10, which is due for release in a few weeks, will see an implementation of the updated linear-gradient and repeating-linear-gradient functions, so in this article I’ll take a look at those, and write a follow-up when the radial gradient updates are available for use. Update: Here’s the companion article on radial gradients.

The simplest linear gradient function remains this, which creates a top to bottom gradient (you can see it in Example 1):

div { background: linear-gradient(#000, #FFF); }

If you want the gradient to go in a different direction (and you probably will), you should now use the keyword ‘to’ plus the side (top, bottom, left, right) you want the gradient to end at; for example, a gradient from left to right would go like this:

div { background: linear-gradient(to right, #000, #FFF); }

Example 2 shows that in action, as long as you have Firefox version 10 or greater.

You can make simple diagonals by using two direction keywords; this one will go from top-left to bottom-right:

div { background: linear-gradient(to right bottom, #000, #FFF); }

The previous syntax allowed you to use direction keywords without to, and this would be the origin of the gradient; that is, the previous example (top-left to bottom-right) would be written like this:

div { background: linear-gradient(left top, #000, #FFF); }

Example 3 illustrates this; if you have Firefox 9 or below you’ll see the old syntax in use, but if you have 10 or above you’ll see the new one. The new Firefox implementation allows you to still use the old syntax for the sake of backwards compatibility, but it will be dropped when the unprefixed functions are implemented.

The rest of the syntax remains consistent. For more complex diagonals you can still use angles:

div { background: linear-gradient(70deg, #000, #FFF); }

That’s shown in Example 4. NB: although the spec states that 0deg is bottom to top, all current implementations (including this updated one in Firefox 10) measure 0deg as left to right. I’m not sure whether all of the browsers will have to change, or the spec will.

Each color-stop can also have a length or percentage value to further customise the gradient:

div { background: linear-gradient(#000 20px, #FFF 90%, #000); }

Example 5 shows this.

There have been a lot of changes to the syntax since it was first proposed, but I think they’ve all been for the better. The linear gradient functions are quite straightforward, understandable, and flexible enough for the majority of use cases, which is what we want from CSS.

To know more, I recommend you read the relevant section of the CSS3 Image Values and Replaced Content module.

5 comments on
“The new (and hopefully final) linear gradient syntax”

  1. I like the new syntax. It reads a lot easier and looks a lot leaner than everything that has come before it. Here’s hoping this is the final iteration.

  2. Nice. But for the meanwhile, you can use css3please if you dislike hand-coding: http://css3please.com/

  3. David, CSS3 Please doesn’t use the new syntax yet. There’s an open issue for it here: https://github.com/paulirish/css3please/issues/78

  4. […] The new (and hopefully final) linear gradient syntax - The latest Working Draft of the CSS3 Image Values and Replaced Content module was released last month, and contains some changes to the gradient syntaxes — for what you’d hope would be the last time. […]

  5. CSS3 Please now supports the new syntax.