title: Using JavaScript to edit CSS gradient
body: <p>I am working on editing CSS gradients through JavaScript in Firefox. 
  I have input boxes where the user can put 
  1. Orientation
  2. 1st Color
  3. 2nd Color</p>
  
  <p>Here is the html </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Linear Gradient Control&lt;/title&gt;
          &lt;script&gt;
              function renderButton(){ 
              var orientation = document.getElementById("firstValue").value;
              var colorOne = document.getElementById("firstColor").value;
              var colorTwo = document.getElementById("secondColor").value;
              //alert(orientation);
              //alert(colorOne);
              //alert(colorTwo);
  
              };
          &lt;/script&gt;
          &lt;style&gt;
              #mainHolder
              {
              width:500px;
              background: -moz-linear-gradient(left,  green,  red);
  
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Gradient Editor&lt;/h1&gt;
          &lt;form&gt;
              &lt;input type="text" id="firstValue"&gt;orientation&lt;/input&gt;&lt;br /&gt;
              &lt;input type="text" id="firstColor"&gt;first color&lt;/input&gt;&lt;br /&gt;
              &lt;input type="text" id="secondColor"&gt;second color&lt;/input&gt;&lt;br /&gt;
          &lt;/form&gt;
          &lt;button type="button" onclick="renderButton()"&gt;Render&lt;/button&gt;
          &lt;div id="mainHolder"&gt;Content&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So to recap, the user will specify their 3 values, which get passed to the function 'renderButton();'. What line can I use to change the 3 values of the CSS3 gradient so that the user can make their own custom gradient boxes? I'm assuming its only a line or two that I will need. </p>
  
  <p>P.S. I realize this example only works in Firefox. I just want to get the concept down before working on different browsers. </p>