CSS + SVG + Canvas cross-browser gradient generator for web designers

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:

• For IE8, you can include the generated inline .png data url in your CSS file.
• For IE7 and lower, you can save the generated Canvas image as a .png image file.

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:

• Use the keyboard up and down arrow keys.
• Use the mouse scroll wheel.
• Click the graphical up and down arrows that are to the right of the textbox. [see 2].
• Hover the mouse between the graphical up and down arrows. [see 3]. Click and hold the left mouse button and move the mouse up and down. If you run out of screen space you can do one or both of the following:
  • Press and hold the shift key so that moving the mouse left and right changes the value.
  • Press and hold the control key to reverse the direction of change (up/right becomes down/left).

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.

Top

• Value unit types cannot be expressed as em or ex.
• All color-stop positions must be of the same unit type. i.e. %, px, pc, pt, mm, cm or in.
• Because of the limitations of the old Webkit radial gradient syntax, it is not possible to define an elliptical radial gradient. Elliptical gradients will be rendered circular.

Top

As 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.

Top