Aurora background
Also called aurora effect, aurora gradient, or northern lights background
A background of soft, blurred color ribbons that drift slowly, like the northern lights, used behind hero sections and landing pages.
import { motion, useReducedMotion } from 'motion/react';
const RIBBONS = [
{ color: 'bg-teal-400', position: 'top-[5%] -left-[10%]', duration: 18 },
{ color: 'bg-violet-500', position: 'top-[30%] left-[25%]', duration: 22 },
{ color: 'bg-pink-500', position: 'top-[55%] -left-[5%]', duration: 26 }
];
export function AuroraHero() {
const reduceMotion = useReducedMotion();
return (
<section className='relative isolate grid min-h-[480px] place-items-center overflow-hidden bg-slate-950 px-6 text-center'>
<div aria-hidden className='absolute inset-0 -z-10'>
{RIBBONS.map((ribbon) => (
// Blurred once; only the transform animates, which stays cheap.
<motion.span
key={ribbon.color}
className={`absolute h-1/3 w-[70%] rounded-full opacity-50 blur-[60px] will-change-transform ${ribbon.color} ${ribbon.position}`}
animate={
reduceMotion
? undefined
: { x: ['-10%', '15%'], y: ['0%', '10%'], rotate: [-12, 8] }
}
transition={{
duration: ribbon.duration,
repeat: Infinity,
repeatType: 'mirror',
ease: 'easeInOut'
}}
/>
))}
</div>
<h1 className='max-w-2xl text-5xl font-semibold tracking-tight text-white'>
Research that writes itself
</h1>
</section>
);
}Add an aurora background behind the hero: three wide, rotated ellipses in teal, violet, and pink at 50% opacity with filter: blur(60px), each drifting and rotating on its own 18 to 26-second transform loop. Keep the headline readable on top, mark the layer aria-hidden, and stop the animation when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Aurora background?
An aurora background layers a few long, rotated shapes in bright colors, blurs them heavily with filter: blur(), and moves them slowly so the colors shift and overlap. On a dark page it glows like the northern lights; on a light page it reads as a soft pastel wash.
It is a popular backdrop for AI products, SaaS landing pages, and launch pages, where it adds atmosphere behind a headline without competing with it.
Blur the shapes once and animate only transform and opacity, ideally with will-change: transform, so the browser can move the already-blurred layers cheaply. Keep the motion slow, with cycles of 10 to 30 seconds, check text contrast where ribbons pass behind it, and stop the drift for people who prefer reduced motion.
Often confused with
- Mesh gradient
- A mesh gradient blends color smoothly across the whole surface. An aurora uses a few separate blurred ribbons that drift over a plain background.
Related terms
All termsMesh gradient
A smooth, multicolor gradient where several colors blend outward from different points, like paint mixing, often used for hero backgrounds.
Animated gradient
A color gradient that slowly shifts across a surface on a loop, often used behind a hero or call to action to add warmth and motion.
Hero section
The large first section at the top of a landing page, with a headline, a short subhead, a call to action, and a visual.
Glow effect
A soft halo of colored light around a button, card, or text, made with colored shadows or a blurred layer behind the element.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.