Quick start

<section class="hero">…</section>
<script src="smooth-background.min.js"></script>
<script>
  new SmoothBackground('.hero', {
    colors: ['#F9BFBF', '#F9F4BF', '#BFC9F9', '#BFF9DB'],
    duration: '1.5s', // transition between two colors
    hold: '1s',       // pause on each color
  });
</script>

The first argument is an element or a CSS selector; for a selector, only the first match is used. To initialise many elements at once, use SmoothBackground.init():

SmoothBackground.init('.card', { colors: ['#fff', '#eee'] });