How to Create an Aurora Background in React (Free Tailwind)
Learn how to build a stunning aurora background in React using Tailwind CSS — for free, with no heavy dependencies and full customisation control.
What Is an Aurora Background?
An aurora background mimics the natural phenomenon of the aurora borealis — layered, flowing bands of color (typically deep blues, greens, purples, and teals) that blend and animate smoothly across a dark canvas. In UI design it has become one of the most popular premium-feeling effects because it pairs beautifully with glassmorphism cards, dark-mode dashboards, and hero sections that need visual depth without heavy images or video.
The effect is achieved with a combination of large radial gradients, blur filters, and CSS keyframe animations that slowly shift the hue, scale, and position of each color blob. The result is a living, breathing background that feels polished without being distracting. Best of all, the entire technique runs on the GPU via CSS transform and filter, so it is silky-smooth even on mid-range devices.
Empire UI ships a ready-made AuroraBackground component as part of its animated backgrounds collection. You can drop it into any project in seconds, or follow this guide to understand exactly how it is built from scratch using plain React and Tailwind CSS.
Core Technique: Radial Gradients + Blur + Animation
The building blocks are simple: place several absolutely-positioned <div> elements inside a relative overflow-hidden container. Give each div a large radial gradient in a distinct aurora color, then apply blur-[120px] (or higher) so the hard edges dissolve into soft glowing blobs. Stack the divs with different opacity values and let CSS animations slowly translate and scale them.
Why Tailwind? Tailwind's blur-*, opacity-*, scale-*, and translate-* utilities map directly to the CSS properties we need, and its JIT engine means we can use arbitrary values like blur-[140px] without writing a single line of custom CSS. The animation keyframes are the only piece that requires a small Tailwind config extension — or you can drop them into a global CSS file.
Here is a minimal self-contained example you can paste directly into any React component file:
``tsx
// AuroraBackground.tsx
import { ReactNode } from 'react';
interface AuroraBackgroundProps {
children?: ReactNode;
className?: string;
}
export function AuroraBackground({ children, className = '' }: AuroraBackgroundProps) {
return (
<div className={relative min-h-screen overflow-hidden bg-zinc-950 ${className}}>
{/* Aurora blobs */}
<div className="pointer-events-none absolute inset-0 z-0">
<div className="aurora-blob absolute -top-40 left-1/4 h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle,rgba(120,80,255,0.55)_0%,transparent_70%)] blur-[120px] animate-aurora-1" />
<div className="aurora-blob absolute top-1/3 -right-20 h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle,rgba(0,220,180,0.45)_0%,transparent_70%)] blur-[140px] animate-aurora-2" />
<div className="aurora-blob absolute bottom-0 left-10 h-[550px] w-[550px] rounded-full bg-[radial-gradient(circle,rgba(60,130,246,0.5)_0%,transparent_70%)] blur-[130px] animate-aurora-3" />
<div className="aurora-blob absolute -bottom-20 right-1/4 h-[400px] w-[400px] rounded-full bg-[radial-gradient(circle,rgba(236,72,153,0.35)_0%,transparent_70%)] blur-[110px] animate-aurora-2" />
</div>
{/* Content */}
<div className="relative z-10">{children}</div>
</div>
);
}
`
The pointer-events-none` class on the wrapper layer ensures the blobs never accidentally capture clicks meant for your content.
Adding the Keyframe Animations
The magic is in the CSS keyframes. Add the following to your tailwind.config.ts (or tailwind.config.js) under theme.extend:
``ts
// tailwind.config.ts
import type { Config } from 'tailwindcss';
const config: Config = {
content: ['./src/**/*.{ts,tsx}'],
theme: {
extend: {
keyframes: {
'aurora-1': {
'0%, 100%': { transform: 'translate(0, 0) scale(1)' },
'33%': { transform: 'translate(60px, -80px) scale(1.15)' },
'66%': { transform: 'translate(-40px, 40px) scale(0.9)' },
},
'aurora-2': {
'0%, 100%': { transform: 'translate(0, 0) scale(1)' },
'40%': { transform: 'translate(-70px, 60px) scale(1.2)' },
'70%': { transform: 'translate(50px, -30px) scale(0.95)' },
},
'aurora-3': {
'0%, 100%': { transform: 'translate(0, 0) scale(1)' },
'50%': { transform: 'translate(80px, -50px) scale(1.1)' },
},
},
animation: {
'aurora-1': 'aurora-1 12s ease-in-out infinite',
'aurora-2': 'aurora-2 16s ease-in-out infinite',
'aurora-3': 'aurora-3 10s ease-in-out infinite',
},
},
},
plugins: [],
};
export default config;
``
Using three distinct durations (10 s, 12 s, 16 s) means the blobs never perfectly overlap on the same frame — this creates the organic, never-repeating feel of a real aurora display.
If you would rather avoid touching the Tailwind config (for example in a project that uses a CSS framework alongside Tailwind), you can define the keyframes in your global globals.css using standard @keyframes rules and reference them via Tailwind's [animation:_aurora-1_12s_ease-in-out_infinite] arbitrary-value syntax.
Performance Tips and Accessibility
Reduce motion support is non-negotiable for a production component. Some users configure their OS to minimise animations for vestibular or cognitive reasons. Respect prefers-reduced-motion by wrapping the animation classes conditionally:
``tsx
import { useReducedMotion } from 'framer-motion'; // or a tiny custom hook
const prefersReduced = useReducedMotion();
// ...
<div className={... ${prefersReduced ? '' : 'animate-aurora-1'}} />
`
Alternatively you can handle this entirely in CSS with @media (prefers-reduced-motion: reduce) { .animate-aurora-1 { animation: none; } }` in your global stylesheet — no JavaScript required.
GPU compositing — CSS blur is expensive when applied to large elements that also animate. Keep blob counts to 3–5 maximum, and apply will-change: transform to each blob <div> so the browser promotes them to their own compositor layer. In Tailwind that is simply will-change-[transform] or the utility will-change-transform (available in Tailwind v3.3+).
Z-index layering: always keep the aurora layer at z-0 and your content at z-10 or higher. Using a relative parent and absolute blobs guarantees the background never affects document flow, so your layout remains predictable. This pattern is identical to the approach used in the glassmorphism card demos on Empire UI.
Customisation: Colors, Intensity, and Variants
The easiest way to personalise the effect is to change the rgba color values inside the radial-gradient. Aurora palettes tend to favour analogous hues — try violet + teal + cyan for a cool Nordic feel, or amber + rose + fuchsia for a warm sunset aurora. Keep opacity values between 0.3 and 0.6; higher values lose the translucent depth that makes the effect compelling.
You can expose color props to make the component reusable across different pages or industry templates:
``tsx
interface AuroraBackgroundProps {
children?: ReactNode;
colors?: [string, string, string]; // three CSS rgba strings
}
// Then interpolate: rgba(${colors[0]},0.5)
`
For even more dramatic depth, add a subtle **noise texture overlay** using an SVG <feGranularFilter> or a tiny PNG noise tile at 2–4 % opacity` over the aurora layer. This breaks the over-smooth digital look and brings the composition closer to the grainy analogue aesthetic popular in editorial design. You can combine this with Empire UI's custom cursor components to complete the immersive experience.
Browse the full set of animated backgrounds on Empire UI — including shooting stars, particle fields, and grid patterns — all free, open-source, and ready to copy into your project.
Using Empire UI's Ready-Made AuroraBackground Component
If you want production-ready code without the setup work, Empire UI's AuroraBackground component is available at no cost. It includes built-in prefers-reduced-motion support, a TypeScript-first API, four color preset themes, and an optional interactive prop that ties blob movement to the user's cursor position via mousemove events for a truly immersive effect.
Install Empire UI into your Next.js or Vite project and import the component:
``bash
npx empire-ui@latest add aurora-background
`
Then use it as a page wrapper:
`tsx
import { AuroraBackground } from '@/components/empire-ui/aurora-background';
export default function HeroSection() {
return (
<AuroraBackground theme="nordic" interactive>
<h1 className="text-5xl font-bold text-white">Build something beautiful</h1>
</AuroraBackground>
);
}
`
The theme prop accepts "nordic" (blue/violet/teal), "forest" (green/emerald/lime), "sunset" (amber/rose/fuchsia), and "mono" (single-hue grayscale). You can also override individual colors via the colors` prop for full control.
For AI-assisted component generation and customisation, check out the Empire UI MCP server — describe the aurora variant you want in plain English and get production-ready component code back in seconds. Pair it with the gradient generator tool to fine-tune your color stops before dropping them into your component.
FAQ
An aurora background is an animated UI effect that simulates the aurora borealis using layered radial gradients, heavy CSS blur filters, and slow keyframe animations. It creates a sense of depth and movement without videos or heavy image assets, making it ideal for hero sections and dark-mode dashboards.
Yes — the entire effect is achievable with pure CSS keyframes and Tailwind utility classes. You only need a few absolutely-positioned divs with radial gradient backgrounds and blur filters, plus keyframe definitions in your Tailwind config or global CSS file. No Framer Motion or GSAP is required.
CSS blur on large elements is GPU-intensive, so keep blob count to 3–5 and add will-change: transform to each animated element. This promotes blobs to their own compositor layer, preventing layout repaints and keeping frame rates consistently high even on mobile devices.
Respect the prefers-reduced-motion media query by disabling or pausing the CSS animations for users who have enabled reduced-motion in their OS settings. You can handle this in a single CSS rule (@media (prefers-reduced-motion: reduce) { animation: none; }) or via a useReducedMotion React hook.
Yes — all Empire UI components, including AuroraBackground, are completely free and open-source. You can copy the code directly from the site or install via the CLI with npx empire-ui@latest add aurora-background. No license fees, no attribution required.