Aurora Mesh Background

Three blurred colour blobs drift behind your content like northern lights. Pure CSS and GPU-friendly.

Original
GPU-friendly
No JS
Reduced-motion ready
Customisable
767 B gzip

An original by PasteMotion · MIT License

WidthFull

Code

index.html

<div class="aurora-mesh">
  <div class="aurora-mesh__blob aurora-mesh__blob--a" aria-hidden="true"></div>
  <div class="aurora-mesh__blob aurora-mesh__blob--b" aria-hidden="true"></div>
  <div class="aurora-mesh__blob aurora-mesh__blob--c" aria-hidden="true"></div>
  <div class="aurora-mesh__content">
    <h2 class="aurora-mesh__title">Northern lights</h2>
    <p class="aurora-mesh__text">A soft gradient that drifts behind your content.</p>
  </div>
</div>

How to use it

Paste the HTML where the animation should appear.
Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
Adjust the custom properties (--accent, --color-2, --color-3, --speed) on .aurora-mesh to restyle it without touching the rest.
Reduced-motion users are covered: the animation calms down or stops when that setting is on.