JSFiddle - React, Tailwind, and code Playground

HTML

<h1>CSS3 Gradient &rarr; SVG Image Converter</h1>
<div class="inputboxes center">
	<p style="text-align:center;">Need to create CSS3 Gradients?  I'd recommend using <a href="http://www.colorzilla.com/gradient-editor/" target="_blank">ColorZilla's Ultimate CSS Gradient Generator</a></p> 
</div>
<div class="inputboxes center">
	<p>Enter any CSS3 Linear Gradient (-moz-, -webkit-, -o-, -ms-, or W3C unprefixed syntax; multiple codes are also supported in <a href="http://www.css3.info/preview/multiple-backgrounds/">CSS multiple background syntax</a>):</p>
	<textarea id="cssinput" onfocus="if(document.getElementById('clearit').checked) {this.value='';}"></textarea><br>
    <input type="radio" id="clearit" name="clearbox" value="1" checked="checked" />Clear Input Box on Focus <input type="radio" name="clearbox" value="0" /> Clear Input Box Manually<input type="button" class="bluebutton right" value="Convert!" onclick="splitGradient(document.getElementById('cssinput').value);" /> <div id="b64"><input type="checkbox" name="b64" id="b64check" value="1" />Generate CSS for IE9 (base64 output)</div>
	<!-- AM: Default dimensions changed (script plays much better with absolute units, and, preview now displays at a sensible size. Previous defaults sometimes resulted in a screen-wide prewiew.  -->
    <p>SVG Height: <input id="userH" value="300" /> SVG Width: <input id="userW" value="300" /> <input type="radio" id="userUnit" name="unit" value="%" />Percent <input type="radio" name="unit" value="px" checked="checked" />Pixels</p>
</div>
<div class="outputboxes center">
<p>For the most accurate rendering, please specify a height and width as close as possible to the dimensions at which you plan to use the SVG. Copy &amp; paste the code below into a text document and save with the ".svg" file extension.</p>
</div>
<textarea id="output" class="codebox center"></textarea>
<div class="outputboxes center" id="updatetext">
</div>
<p id="base64p" class="center">Copy the below output for...

CSS

*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
*:not(#IE){filter:none\9} /* AM: Hide filters in IE9 since they don't work correctly with border-radius */
html,body{height:100%;min-height:100%;margin:0;padding:0}
:root,:root>body{height:auto} /* AM: IE8- needs 100% height for the background to fill the whole page, but that messes up IE9+ and everyone else (go-figure), so this resets the height for everyone else. */
body{font-family:Arial,sans-serif;background:#c1c4ce;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f7',endColorstr='#c1c4ce');
	background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIHN0b3AtY29sb3I9IiNmNWY1ZjciLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNjMWM0Y2UiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZzEpIi8+PC9zdmc+);
	background:-webkit-gradient(linear,0 0,0 100%,from(#f5f5f7),to(#c1c4ce));
	background:-webkit-linear-gradient(#f5f5f7,#c1c4ce);background:-moz-linear-gradient(#f5f5f7,#c1c4ce);background:-o-linear-gradient(#f5f5f7,#c1c4ce);
	background:linear-gradient(#f5f5f7,#c1c4ce)}
.center,svg,.codebox{display:block;margin:0 auto}.left{float:left}.right{float:right}
h1,#footer,.button,.bluebutton{text-align:center}
.inputboxes,.outputboxes,textarea,#preview,#base64p{width:80%;max-width:1200px;margin:.5em auto;resize:none}
.inputboxes{border:1px solid #333;padding:10px;margin-bottom:20px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}
input:focus,textarea:focus,code{outline:none;background:#eff} /* AM: Webkit browsers show an unsightly outline that doesn't respect border-radius very well. So, replace with a background */
#cssinput{width:100%;height:75px}
#userH,#userW,textarea{border:solid 1px #333;overflow:auto\9} /* AM: overflow:auto only for IE, to hide scrollbars on textarea until needed.

/* AM: Gradients are simplified...

JavaScript

/* Overview of major changes, done by Anthony Martinez (http://www.linkedin.com/in/canthonymartinez/). (All other script/CSS Annotations by me are preceded by "AM:")
 *
 * 1) Added full support for new unprefixed W3C syntax gradients (using 'to <destination>' syntax).
 * 2) Added logic to calculate degrees differently, to match the new W3C syntax. 
 * 		For example, try -moz-linear-gradient(72deg,#fff,#000) and linear-gradient(72deg,#fff,#000) in CSS -- they render differently.
 *		Then input them into this script, and they should each render in SVG the same way they do in CSS.
 * 3) If all color stop percentages are missing, then the script will now interpolate them, as happens in CSS.
 *		If only the start and ending stops are missing, the script will add them.
 * 4) If no directions or angle units are specified, the script will now assume defaults, as happens in CSS.
 * 5) "Angle units"? Yeah, there's now support for all valid units, (deg, rad, grad, & turns). Plus negative values and decimals work.
 * 6) Improved support for old Webkit syntax -- from() and to() will work as expected, even with decimals, and even if to() comes before other color-stops (as is acceptable).
 * 7) Added support for RGB/A percents, HSL/A, floating points in RGB/A and HSL/A, color names, and 'transparent' keyword.
 * 8) Added logic to convert alpha values and 'transparent' to proper SVG 'stop-opacity' values.
 * 9) Overhauled the SVG vector generation logic, greatly improving accuracy.
 *10) Added optional IE9 base64 output for CSS.
 *11) Added multiple background support. Yes! No other SVG or gradient generator I'm aware of, even the awesome visualcsstools.com that I drew inspiration from, has this.
 *12) Extended SVG preview display/update capabilites to all capable browsers (Chrome 7+, IE9+, FF4+, Safari 5.1+, Opera 11.6+)
 *
 * Issues I'm aware of:
 *
 * 1) Still no radial-gradient support yet, but I plan to figure that out not too long from now!
 * 2) For some reason, FF3.6 and...