The new (and hopefully final) linear gradient syntax

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

The lat­est Work­ing Draft of the CSS3 Image Val­ues and Replaced Con­tent mod­ule was released last month, and con­tains some changes to the gra­di­ent syn­tax­es — for what you’d hope would be the last time. The updat­ed syn­tax­es are a lit­tle more log­i­cal, but offer the same flexibility.

Fire­fox 10, which is due for release in a few weeks, will see an imple­men­ta­tion of the updat­ed linear-gradient and repeating-linear-gradient func­tions, so in this arti­cle I’ll take a look at those, and write a fol­low-up when the radi­al gra­di­ent updates are avail­able for use. Update: Here’s the com­pan­ion arti­cle on radi­al gra­di­ents.

The sim­plest lin­ear gra­di­ent func­tion remains this, which cre­ates a top to bot­tom gra­di­ent (you can see it in Exam­ple 1):

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

If you want the gra­di­ent to go in a dif­fer­ent direc­tion (and you prob­a­bly will), you should now use the key­word ‘to’ plus the side (top, bot­tom, left, right) you want the gra­di­ent to end at; for exam­ple, a gra­di­ent from left to right would go like this:

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

Exam­ple 2 shows that in action, as long as you have Fire­fox ver­sion 10 or greater.

You can make sim­ple diag­o­nals by using two direc­tion key­words; this one will go from top-left to bottom-right:

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

The pre­vi­ous syn­tax allowed you to use direc­tion key­words with­out to, and this would be the ori­gin of the gra­di­ent; that is, the pre­vi­ous exam­ple (top-left to bot­tom-right) would be writ­ten like this:

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

Exam­ple 3 illus­trates this; if you have Fire­fox 9 or below you’ll see the old syn­tax in use, but if you have 10 or above you’ll see the new one. The new Fire­fox imple­men­ta­tion allows you to still use the old syn­tax for the sake of back­wards com­pat­i­bil­i­ty, but it will be dropped when the unpre­fixed func­tions are implemented.

The rest of the syn­tax remains con­sis­tent. For more com­plex diag­o­nals you can still use angles:

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

That’s shown in Exam­ple 4. NB: although the spec states that 0deg is bot­tom to top, all cur­rent imple­men­ta­tions (includ­ing this updat­ed one in Fire­fox 10) mea­sure 0deg as left to right. I’m not sure whether all of the browsers will have to change, or the spec will.

Each col­or-stop can also have a length or per­cent­age val­ue to fur­ther cus­tomise the gradient:

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

Exam­ple 5 shows this.

There have been a lot of changes to the syn­tax since it was first pro­posed, but I think they’ve all been for the bet­ter. The lin­ear gra­di­ent func­tions are quite straight­for­ward, under­stand­able, and flex­i­ble enough for the major­i­ty of use cas­es, which is what we want from CSS.

To know more, I rec­om­mend you read the rel­e­vant sec­tion of the CSS3 Image Val­ues and Replaced Con­tent module.

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

  1. I like the new syn­tax. It reads a lot eas­i­er and looks a lot lean­er than every­thing that has come before it. Here’s hop­ing this is the final iteration.

  2. Nice. But for the mean­while, you can use css3please if you dis­like hand-cod­ing: http://css3please.com/

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

  4. […] The new (and hope­ful­ly final) lin­ear gra­di­ent syn­tax — The lat­est Work­ing Draft of the CSS3 Image Val­ues and Replaced Con­tent mod­ule was released last month, and con­tains some changes to the gra­di­ent syn­tax­es — for what you’d hope would be the last time. […]

  5. CSS3 Please now sup­ports the new syntax.