CSS gradient syntax: comparison of Mozilla and WebKit

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

Update: I wrote this article in 2009. In early 2011 WebKit decided to change their syntax to match that used in Firefox (and the W3C specification). The syntax contained in these articles will be maintained for reasons of backwards-compatibility, but you should use the new syntax for the future.

CSS Gradients were originally proposed by the WebKit team in April 2008, modified from the syntax proposed for the Canvas element of HTML5. In August of this year, Mozilla announced that an implementation slightly modified from that of WebKit would be in the next version of Firefox (3.6).

Since then, however, the CSS WG have discussed a different syntax, and a resolution was passed to add this to the Image Values module. Mozilla have decided to implement the new syntax, which is simpler than WebKit’s but less flexible.

In this article, which will be split into at least two parts, I’m going to compare the two syntaxes.

Throughout both parts, I will be referring to the following demo page; you’ll need to be using Safari 4, Chrome, or Firefox 3.6beta3+ in order to see it working:

CSS Gradients comparison: Mozilla & WebKit.

The first and most noticeable difference is that the Mozilla implementation uses two properties – -moz-linear-gradient and -moz-radial-gradient – whereas WebKit use only a single property – -webkit-gradient – with two type values: linear and radial. That should become clearer as I progress.

Please note that I’ve tried to use the simplest syntax possible for all examples, but there may be occasions where I’ve slipped up. Feel free to correct me.

Linear gradients

The Mozilla syntax accepts three different properties: start point, angle of direction, and colour stops. WebKit’s also takes three (excluding type: linear, as mentioned previously): start point, end point, and colour stops.

So a simple left-right gradient change (Linear 1) between two colours in Mozilla:

-moz-linear-gradient (left, green, yellow);

The left value sets the default position to the middle of the left-hand side (0deg, 0 50% or left center does the same); the line then goes horizontally out passing from green to yellow in equal proportion.

To get the same pattern in WebKit:

-webkit-gradient (linear, left center, right center, from(green), to(yellow));

The start point is at left center (I could use unit values or percentages as Mozilla does, but not an angle), the end point at right center, and it also passes from green to yellow in equal proportion.

We can tweak those values slightly to get a diagonal gradient from the bottom left corner (Linear 2); for Mozilla I specify an angle, for WebKit I set new start and end points:

-moz-linear-gradient(45deg,green,yellow);
-webkit-gradient(linear,left bottom,right top,from(green),to(yellow));

I’ll tweak those values again to make a bottom-top gradient with an extra colour (Linear 3):

-moz-linear-gradient(90deg,green,yellow,blue);
-webkit-gradient(linear,center bottom,center top,from(green),color-stop(0.5, yellow),to(blue));

The big difference here is that Mozilla distributes the three colours proportionally, whereas WebKit’s color-stop function requires that I set a stop point – I’ve used 0.5 here, although I could have used 50%. The from and to functions are shorthand for color-stop values 0 and 1 (or 100%), respectively.

I don’t have to distribute the colours evenly, however; by changing the value in the colour stop I can choose my own ratio. In the final example (Linear 4) I’ve set the yellow to begin 25% along the length of the gradient:

-moz-linear-gradient(90deg,green,yellow 25%,blue);
-webkit-gradient(linear,center bottom,center top,from(green),color-stop(25%, yellow),to(blue));

For Webkit I only have to update the color-stop value; for Mozilla, I have to specify it.

Conclusions

There are a few differences in the syntaxes for linear gradients, but they’re not major; Mozilla use an angle value, where WebKit use a point-to-point system. I’d say Mozilla’s is the easier to grasp purely because of its brevity, but it’s not that important. In the second part of this article I’ll talk about radial gradients, and it’s there that the differences in implementation become more pronounced.

Update: Part 2 of this article, about Radial Gradients, is now available.

14 comments on
“CSS gradient syntax: comparison of Mozilla and WebKit”

  1. Social comments and analytics for this post…

    This post was mentioned on Twitter by stopsatgreen: New blog post: CSS gradient syntax: comparison of Mozilla and WebKit http://bit.ly/6tyBAL/

  2. […] CSS gradient syntax: comparison of Mozilla and WebKit […]

  3. I retract my previous complaint — mostly. I can get it “good enough” with an angle in my case. Interesting approach.

  4. Here’s a major issue I have with Webkit’s syntax.

    I have the following on my website:
    background-image: url(images/background.jpeg), -moz-linear-gradient(#92dbd6, #077582 1152px, #022228);

    The intent of this is to provide a gradient from #92dbd6 to #077582 while a 1152px background image loads, and continue from the #077582 final colour on the backgroudn image down to #022228 to offer a seamless shading to dark.

    This is, as far as I can tell, impossible in the webkit syntax.
    It is a shame since this is a real world example I could use immediately. In Safari or IE, you simply see the background colour of #077582 so the image seems to shade to that on long pages.

    In theory I can use background-position and only:
    -webkit-gradient(linear, left, left bottom, from(#077582),to(#022228))
    That would offer nothing while the image loads, but at least offer a gradient.

    *however* webkit has ditched -webkit-background-position and -webkit-background-position-x

    So if I did that I’d screw up firefox, which seems quite unfair.

    I also tried:
    background: url(images/background.jpeg) top left repeat-x, -webkit-gradient(linear,left top, left bottom, from(#077582), to(#022228)) 1152px left repeat-x / 100% 100%;

    Which seems to me to be how the CSS3 spec example says to do a combined background – my theory was firefox and other browsers would simply throw out this rule due to the -webkit

    However webkit ignores this rule too.

    So, my site remains linear-gradient free in webkit.

    Basically it boils down to the webkit syntax only supporting percentages in stops, and not supporting pixels for the begin/end (I could do left 1152px, left bottom otherwise)

    The Firefox syntax is far more flexible, I hope it becomes standard.

    Same in radial gradients as I hope you discovered, with variable size boxes. I had to ditch webkit radial gradiants on variable boxes ’cause they were also unusable.

  5. BTW, your stylesheet specifies:

    #commentform input[type=”text”]:focus, #commentform textarea:focus {
    background-color:#FAEAE6;
    }

    without specifying a colour, so I get almost unreadable grey text on a pinkish background with my dark system theme.

    For sites I visit a great deal I override bad behaviour in stylish, but it’d be nice if you fixed it.

  6. Thanks for the feedback, nemo. TBH my comments form needs to be properly re-designed, but I’ve added the color into the stylesheet to fix the problem you mentioned.

    You’re right about the WebKit syntax, it only allows a decimal or percentage value.

    According to this bug report the WebKit team are looking at the new syntax but have one or two concerns.

  7. Aye. I chatted with him. He was of opinion the new proposal was too restrictive, but fact is, everything he challenged me to do w/ Firefox syntax I did w/ only a few minutes effort.

    And, yes, it requires using things like multiple background-images, background-size, background-position, background-clip etc.

    I see no problem w/ that. Having a gradient syntax that repeats things you can already do w/ other parts of background-* seems rather redundant.

    Anyway. Whatever their concerns are, hopefully they don’t change the core of the syntax. We’ve been finding the new proposal way way more useful than the old syntax.

  8. […] are two great articles on this topic, delver deeper into the syntax differences: CSS gradient syntax: comparison of Mozilla and WebKit and CSS gradient syntax: comparison of Mozilla and WebKit (Part […]

  9. […] la syntaxe des gradients pour Firefox et Webkit, je vous conseille cet excellent post sur le blog Broken-links. Posté dans CSS3 | Tags : CSS3, […]

  10. FWIW, the color problem reported above still seems to exist.

  11. In the future this Problem is going to be solved.
    http://webkit.org/blog/1424/css3-gradients/

  12. @Type-Style: Yes, I’ll update this post to reflect the change of syntax.

  13. […] a handy comparison of Mozilla’s and WebKit’s gradient formats, and […]

  14. […] la syntaxe des gradients pour Firefox et Webkit, je vous conseille cet excellent post sur le blog Broken-links. Posted in: Css   Tags: […]