Aurora Gradient

Soft, blurred clouds of colour drift slowly behind a section, like the northern lights, while your content stays sharp on top.

Your hero section

How to use it

Paste the snippet just before </head>.
Add data-aurora-gradient to a section, hero or card.

Options

Add any of these attributes to the same element.

`data-colors`	Comma-separated colours, any number. Default purple, violet, pink and sky blue.
`data-speed`	Seconds per drift. Default 9.
`data-blur`	Blur in px. Default 60.

1 · Snippet

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundles/anime.umd.min.js"></script>
<script>
  (function () {
    // Aurora Gradient: soft, blurred colour clouds drift slowly behind a section,
    // like the northern lights. The content stays sharp on top.
    // Usage: <section data-aurora-gradient>…</section>
    // Optional: data-colors="#a855f7,#ec4899,#38bdf8" (any number), data-speed
    // (seconds per drift, default 9), data-blur (px, default 60).
    var DEFAULTS = { colors: ['#a855f7', '#6a0dad', '#ec4899', '#38bdf8'], speed: 9, blur: 60 };

    var css =
      '[data-aurora-gradient]{position:relative;isolation:isolate;overflow:hidden}' +
      '.au-layer{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}' +
      '.au-blob{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;left:20%;top:20%;opacity:.7}';
    var style = document.createElement('style');
    style.textContent = css;
    document.head.appendChild(style);

    function build(el) {
      var d = el.dataset;
      var colors = d.colors ? d.colors.split(',').map(function (c) { return c.trim(); }) : DEFAULTS.colors;
      var speed = (+d.speed || DEFAULTS.speed) * 1000;
      var layer = document.createElement('div');
      layer.className = 'au-layer';
      layer.setAttribute('aria-hidden', 'true');
      layer.style.filter = 'blur(' + (+d.blur || DEFAULTS.blur) + 'px)';
      el.insertBefore(layer, el.firstChild);
      var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      var R = anime.utils.random;

      colors.forEach(function (color) {
        var blob = document.createElement('div');
        blob.className = 'au-blob';
        blob.style.background = 'radial-gradient(circle, ' + color + ' 0%, transparent 65%)';
        layer.appendChild(blob);
        // Start somewhere random so it doesn't open on a stack of circles.
        anime.utils.set(blob, { x: R(-40, 40) + '%', y: R(-40, 40) + '%', scale: R(0.8, 1.4, 2) });
        if (reduced) return;
        (function drift() {
          anime.animate(blob, {
            x: R(-45, 45) + '%',
            y: R(-45, 45) + '%',
            scale: R(0.7, 1.5, 2),
            duration: speed * R(0.7, 1.3, 2),
            ease: 'inOut(2)',
            onComplete: drift
          });
        })();
      });
    }

    function init() {
      document.querySelectorAll('[data-aurora-gradient]').forEach(function (el) {
        if (el._au) return;
        el._au = true;
        build(el);
      });
    }

    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
    else init();
  })();
</script>

2 · Your HTML

<section class="hero" data-aurora-gradient data-colors="#a855f7,#ec4899,#38bdf8">
  <h1>Hello</h1>
</section>