Adobe Fireworks CS6 has a very useful CSS Properties panel that automatically generates the CSS from a selected object. It even lets you choose which browsers you want to target with CSS3 properties that might still need browser-specific prefixes. Unfortunately, it generates the wrong value for the standard
linear-gradient() function. It gets the browser-specific versions right, but whoever coded the panel fell into the trap of believing that all was necessary was to use the same value for the standard, unprefixed function. With many CSS properties, that works, but not with
The reason lies in the way gradients were first implemented by browsers. It was decided to use the polar coordinate system, in which 0° points right and degree values increase counterclockwise, as shown in the following figure.
This is different from the standard way of measuring angles adopted by the W3C, which follows compass bearings. In other words, 0° points straight up, and degree values increase clockwise, as shown in the next figure.
Because the starting point is different, and the angles are measured in the opposite direction, the only common angle is
<div> elements demonstrate the problem. The gradient should transition vertically from green at the top to orange at the bottom. If your browser supports the standard, unprefixed version of
linear-gradient(), the gradient in the
<div> on the left will run from right to left. The gradient on the right should look correct in all browsers that support CSS3 gradients.
To work out the correct angle for the standard, unprefixed
linear-gradient() function, you need to remember that the value generated by Fireworks CS6 starts at the right, and goes counterclockwise. So
90deg needs to be changed to
I’m told that Adobe is aware of this bug, and that it’s scheduled to be fixed. But with Firefox 16 and IE 10 now supporting the unprefixed version of
linear-gradient(), you need to edit your styles right away because the gradients will be going in the wrong direction.