Aurora / Mesh Gradient
A deeply blurred, slow-moving set of vibrant gradient blobs (mesh gradient) that simulates the aurora borealis or viscous fluid, often set behind text or empty states.
Live Demo
Vibe Generation
Mesmerizing blurred fields.
What It Is
A deeply blurred, slow-moving set of vibrant gradient blobs (mesh gradient) that simulates the aurora borealis or viscous fluid, often set behind text or empty states.
✓When to Use
- Hero section backgrounds
- Login screens empty space
- Waiting or "generating" states
✕When NOT to Use
- Behind complex data tables
- If performance is highly constrained (heavy blurred elements can be GPU intensive on mobile)
Configuration Tips
- 01Use absolute positioned divs with intense blur (e.g., blur-[120px]) and animate their translation and scale infinitely.
You've Seen It In
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create an animated aurora background using 3 heavily blurred, overlapping CSS circles (cyan, magenta, yellow) that slowly drift and change size.
Code Example (Tailwind CSS)
export function AuroraBackgroundDemo() {}Related Effects
Shimmer / Sweep Loader
An animated highlight that sweeps horizontally across placeholder content, creating the illusion of activity and reducing perceived wait time. Often combined with skeleton screens.
Image Lazy Load Fade
Images load as low-res blurs or empty blocks and gently crossfade into their full high-resolution versions instead of popping in jarringly line-by-line.