Visual CSS Generator is intended for generating CSS3, Canvas and SVG code for all possible linear and radial gradients and is therefore intended for targeting modern browsers, including IE9. (It can, however, generate the code for the old Webkit syntax).
For a fall back for pre IE9 you have the following options:
The controls should be fairly self explanatory but the spinner textbox deserves a special mention.
As well as typing in the value directly, there are several other ways to adjust the value:
To change the precision of the change, hover over the top-right hand corner of the textbox and click the gear icon. [see 4]. Valid values are 100, 10, 1, 0.1, 0.01 etc. The precision amounts available for selection will depend on the unit or angle type that is being edited.
Use these buttons to change the graphically rendered output in the preview window to CSS, SVG, Canvas and legacy Webkit respectively. The LWK button will be disabled unless the browser is Webkit based such as Chrome or Safari. In IE9, the CSS button is not available, though it is available in IE10.
To discover what any other button does, simply hover the mouse over and see the tooltip.
If you have any feature suggestions, please send an email to visualcsstools at gee mail dot com.
TopAs of version 12.0, Firefox cannot render a CSS radial gradient where the size is expressed explicitly as a width and height. The good news is that it can render SVG and Canvas gradients so if an explicitly sized gradient is required, an SVG or Canvas image can be used in place of the CSS code.
Occasionally you will notice a slight difference between the CSS and SVG/Canvas rendered output; this is to be expected because of the different ways that browser engines render the CSS and SVG/Canvas gradients.
If you do notice a significant difference between the CSS and SVG/Canvas rendering, have a look at the output in several different browsers to see if the difference is consistent. I've noticed several bugs in the SVG rendering, particularly when using a WebKit or Gecko based browser.
If the difference is consistent then it indicates a problem with this software. If you think there is a bug, please email the CSS code to visualcsstools at gee mail dot com.
TopPaste standard w3c, mozilla, trident or current webkit CSS code and click OK.
Example:
-moz-radial-gradient(left center, farthest-corner, red 0%, white 50%, blue 100%)
Note: