How to use it
1. Put a canvas inside your hero
<section class="hero"> <canvas data-aurora></canvas> <h1>Your headline</h1> </section>
2. Add this CSS
The canvas fills its parent, so the parent needs a position and a height.
.hero { position: relative; min-height: 100vh; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; }
.hero h1 { position: relative; color: #fff; } /* keeps the text above the canvas */3. Add the script
<script src="aurora.js"></script>
Choose your colours
Give it four colours. The first one is the base and also darkens the edges. The other three flow over it.
<canvas data-aurora
data-aurora-colors="#2b0a3d,#ff5c8a,#ffb86b,#7c2cff"
data-aurora-speed="1.5"
data-aurora-scale="1.2"
data-aurora-grain="0.04"></canvas>| Attribute | Default | What it does |
|---|---|---|
data-aurora-colors | purple, cyan, pink on navy | Four colours separated by commas. The first is the base colour. |
data-aurora-speed | 1 | How fast the colours flow. Use 0 for a still picture. |
data-aurora-scale | 1 | Size of the colour clouds. A bigger number gives smaller, busier clouds. |
data-aurora-grain | 0.05 | Film grain on top. It hides colour banding. Use 0 to switch it off. |
Ready-made colour sets
These are the presets from the demo. Copy the one you like.
| Name | Colours |
|---|---|
| Aurora | #0b0f2e,#7c5cff,#22d3ee,#ff5c8a |
| Sunset | #2b0a3d,#ff5c8a,#ffb86b,#7c2cff |
| Ocean | #02111f,#0ea5e9,#22d3ee,#10b981 |
| Forest | #04130c,#10b981,#a3e635,#0ea5e9 |
| Neon | #12002b,#ff2bd6,#00e5ff,#ffe600 |
| Mono | #050505,#3a3a3a,#8a8a8a,#1c1c1c |
Change it from JavaScript
Use this when the colours should follow a theme switch or a colour picker.
var bg = AuroraBackground(document.querySelector('canvas'), { speed: 1.2 });
bg.set('colors', ['#02111f', '#0ea5e9', '#22d3ee', '#10b981']);
bg.set('speed', 0.5);Why not a CSS gradient animation?
- CSS can only slide a fixed gradient around. This one mixes the colours in new shapes all the time, so it never visibly repeats.
- It runs on the graphics card. A large animated CSS gradient with blur can make a whole page stutter. This draws one small picture and stretches it.
- It stops when nobody sees it. Off screen or in a background tab it draws nothing.
What if WebGL is not available?
Then the canvas shows a still CSS gradient in the same four colours. The page keeps working and looks intentional. Visitors who switched off animations get one still frame of the real effect.
Common questions
My text is hard to read on top of it.
Pick a dark first colour, because it darkens the edges. You can also put a half-transparent dark layer between the canvas and the text.
Does it slow down phones?
It draws at reduced resolution on purpose, because the picture is soft anyway. On current phones it runs smoothly.
Can I use it as a full page background?
Yes. Give the canvas a parent with position: fixed; inset: 0; z-index: -1.
What is in the download
aurora.jsthe script with the shader inside, about 5 KBindex.htmlanddemo.cssthe demo page you see aboveREADME.txtandLICENSE.txtthe short guide and the MIT licence
Licence
MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.