Fireworks CSS Properties panel gets gradient wrong

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 linear-gradient().

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.

Polar coordinate system

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.

Standard degree system in CSS

Because the starting point is different, and the angles are measured in the opposite direction, the only common angle is 45deg.

The following <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 0deg, and -90deg becomes 180deg.

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.

This entry was posted in CSS. Bookmark the permalink.

One Response to Fireworks CSS Properties panel gets gradient wrong

  1. Sunday says:

    Thanks for this useful information, if all the book writers can be managing their site like this ; programing and web development would have been easier than this.
    Sir, I want to suggest this, please help us write a php book that the blog section will include category, comment and archive without using wordpress that one would just hard code from the beginning.
    2. Sir, I have read training from the source. how do I create the titles, categories , archive of my blogs in my index page like you did on the front page of foundationphp.com before cliking to take one to the main blog page using wordpress. you know wordpress has its own index page.