About Aurora Mesh Gradient
Make every hero section feel expensive.
Aurora Mesh Gradient is a real-time WebGL background that flows like light. Soft color fields drift, warp and blend into each other, with deep background voids, subtle film grain and a gentle pull toward the cursor. It's the look behind today's top AI and SaaS landing pages, and you don't need to write any code.
Drag it onto the canvas, pick a preset, and place your headline on top. Done.
Features
- 6 hand-tuned presets: Aurora, Sunset, Ocean, Candy, Lava, Mono
- Custom mode with up to 6 colors plus a background color (supports your color styles)
- Cursor interaction with adjustable strength and smoothing
- Full control over speed, warp, detail, sharpness, voids, grain, saturation and vignette
- Seed control: generate a unique layout for every project
- Quality slider for great performance on large screens
- Animates only while it's on screen, so it's light on battery and CPU
- Respects the "reduced motion" accessibility setting
- Static fallback for thumbnails, exports and browsers without WebGL
- Border radius control: works as a full-page background or a rounded card
- No external fonts, scripts or links
Perfect for
AI products · SaaS landing pages · Portfolios · Agency sites · Launch pages · Pricing sections · Waitlists · Event pages
How to use
1. Add the component to your page.
2. Set its size to Fill (or any fixed size).
3. Choose a preset or switch to Custom colors.
4. Put your content on top of it in a Stack or Frame.
