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.
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/…
uberVU - social comments [November 27th, 2009, 21:06]
[…] CSS gradient syntax: comparison of Mozilla and WebKit […]
Max Design - standards based web design, development and training » Some links for light reading (01/12/09) [December 1st, 2009, 11:06]
I retract my previous complaint — mostly. I can get it “good enough” with an angle in my case. Interesting approach.
Alan Hogan [December 20th, 2009, 21:46]
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.
nemo [February 14th, 2010, 19:30]
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.
nemo [February 14th, 2010, 19:32]
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.
Peter [February 14th, 2010, 23:33]
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.
nemo [February 15th, 2010, 01:06]
[…] 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 […]
CSS gradients for all web browsers, without using images - Robert's talk [February 15th, 2010, 11:04]
[…] la syntaxe des gradients pour Firefox et Webkit, je vous conseille cet excellent post sur le blog Broken-links. Posté dans CSS3 | Tags : CSS3, […]
Un effet de gradient en CSS3 | Blog de Johan BLEUZEN [February 17th, 2010, 09:54]
FWIW, the color problem reported above still seems to exist.
nemo [April 3rd, 2010, 18:02]
In the future this Problem is going to be solved.
http://webkit.org/blog/1424/css3-gradients/
Type-Style [January 21st, 2011, 16:56]
@Type-Style: Yes, I’ll update this post to reflect the change of syntax.
Peter [January 21st, 2011, 17:01]
[…] a handy comparison of Mozilla’s and WebKit’s gradient formats, and […]
How to Make a CSS3 Floating Follow Tab with Rollover Effects | Tutoriali.com.hr [April 23rd, 2011, 15:11]
[…] la syntaxe des gradients pour Firefox et Webkit, je vous conseille cet excellent post sur le blog Broken-links. Posted in: Css Tags: […]
Un effet de gradient en CSS3 | blog agence de communication marrakech [May 24th, 2011, 13:15]