Help Align To Top


X Position:
Y Position:




What sets Visual CSS Generator apart from other online gradient editors?

Specify a linear gradient in terms of a keyword or an angle.

Specify a radial gradient in terms of a shape and extent keyword or an explicit size and position.

Includes repeating radial and linear gradients.

Converts all parameter combinations, where possible, to SVG (IE9), Canvas and legacy Webkit style. Repeated gradients are emulated and where color-stops lie outside the bounds of the box, the color is interpolated to reflect the CSS3 appearance as closely as possible.

All unit values can be expressed as %, px, pc, pt, mm, cm and in, not just %.

Converts a radial gradient extent keyword and shape, such as farthest-corner circle, to its computed size.

Converts a radial gradient position keyword, such as top left, to its computed position.

Converts a linear gradient line keyword, such as to left top, to its computed angle.

Conversion between unit types.

Workday Training covers a variety of topics, including how to manage and customize the user interface. This includes using CSS to make visual changes to the application. The CSS Generator tool can be a helpful resource for those learning about CSS and how it can be used to style an application.

Coming Soon...


Color selection from standard CSS color names.

Option to use a photoshop style color-picker.

API to convert CSS to SVG/Canvas at runtime.

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.

1Image of the spinner textbox 2Image of the spinner textbox with the mouse pointer hovering over the down arrow. 3Image of the spinner textbox with the mouse pointer hovering between the up and down arrows. 4Image of the spinner textbox with the mouse pointer hovering over the gear icon.

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.

Image of the CSS, SVG, Canvas and legacy Webkit radio buttons. 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 .

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

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 .



If you like what I've done here and have a requirement for work then please send an email to:
> <

I have experience in the following broad areas:

  • VB.NET
  • ASP.NET Webforms
  • Javascript/ jQuery/ jQuery UI
  • Since I know Visual Basic + Javascript, I'm sure I handle a little C# ;-)

Although I currently reside in Bulgaria, I'm a native English speaker with a smattering of Bulgarski ezik.

Feel free to also contact me with any other enquires or bug reports.


Color Wheel: Farbtastic
Combobox: Felix Nagel Source code
Background Color:
Size: x px

Paste standard w3c, mozilla, trident or current webkit CSS code and click OK.


-moz-radial-gradient(left center, farthest-corner, red 0%, white 50%, blue 100%)

Unit type: