title: Setting gradient programmatically
body: <p>I'm trying to set a linear-gradient background for an element using an array of computed swatches.</p>
  
  <p>Currently, I have this stylesheet (jsfiddle <a href="http://jsfiddle.net/pierrebonbon/pz18892x/1/" rel="nofollow">here</a>):</p>
  
  <pre><code>.element
      background linear-gradient(180deg, #92c3ff, #ff8e87, #fcfb83)
      background-size 600% 600%
      animation BackgroundAnimation 20s ease infinite
  
  @keyframes BackgroundAnimation
     0% {
     background-position 50% 0
     }
     50% {
     background-position 50% 100%
     }
     100% {
     background-position 50% 0
     } 
  </code></pre>
  
  <p>Instead of hard-coding the colours in the stylesheet as shown above, I want to use an array of computed swatches instead. The swatches are computed with the help of <a href="https://github.com/jariz/vibrant.js" rel="nofollow">Vibrant.js</a>, as follows:</p>
  
  <pre><code>var img = document.createElement('img');
  img.setAttribute('src', './path/to/image.png');
  
  img.addEventListener('load', function() {
  var vibrant = new Vibrant(img);
  var swatches = vibrant.swatches();
  for (var swatch in swatches)
  if (swatches.hasOwnProperty(swatch) &amp;&amp; swatches[swatch])
  </code></pre>
  
  <p>I can easily set the background color (a solid, single color) of the selected element, like this:</p>
  
  <pre><code>var element = document.querySelector(".element");
  
  element.style.backgroundColor = vibrant.DarkVibrantSwatch.getHex();
  
  // element.style.backgroundColor = vibrant.VibrantSwatch.getHex();
  // element.style.backgroundColor = vibrant.MutedSwatch.getHex();
  // element.style.backgroundColor = vibrant.DarkMutedSwatch.getHex();
  // element.style.backgroundColor = vibrant.LightMutedSwatch.getHex();
  </code></pre>
  
  <p>However, how could I possibly set a gradient with all the existing swatches instead of a single color background? Furthermore, how would I go about to animate it?</p>