CSS3 Gradient → SVG Image Converter

Need to create CSS3 Gradients? We'd recommend using ColorZilla's Ultimate CSS Gradient Generator.

Enter any CSS3 linear gradient below. -moz-, -webkit-, -o-, -ms-, or W3C unprefixed syntaxes are supported, as are multiple gradients in CSS multiple background syntax. The background-size property is also supported.

Width: Height:

For accurate rendering, specify a width and height above matching the size at which you plan to use the SVG. Otherwise, the script assumes a 300x300 pixel default. After clicking "Convert", paste the output below into a text editor and save as an .svg file.

Preview display/updating is disabled while Batch Mode is active. After clicking "Convert", copy the data URI output below for use as a CSS gradient fallback. .selector{background:<paste output here>} is all you need to make it work.

Fork Us On GitHub