Animated Background for React
A responsive aurora-style animated background built with layered CSS gradients and Tailwind utilities. It is lightweight, decorative and disabled automatically for reduced-motion users.
Aurora background
Copy the code
export function AnimatedBackground() {
return (
<div className="relative min-h-80 overflow-hidden rounded-3xl bg-slate-950">
<div aria-hidden="true" className="absolute -left-20 -top-20 h-72 w-72 animate-pulse rounded-full bg-violet-600/60 blur-3xl motion-reduce:animate-none" />
<div aria-hidden="true" className="absolute -bottom-20 -right-20 h-72 w-72 animate-pulse rounded-full bg-cyan-500/50 blur-3xl [animation-delay:1s] motion-reduce:animate-none" />
<div className="relative grid min-h-80 place-items-center text-3xl font-bold text-white">Aurora background</div>
</div>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the animated background
This animated background is part of Empire UI - a free, open-source library of 34+ component types rendered across 41 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 41 styles or grab the matching glassmorphism components.