Setting gradient programmatically
<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>