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. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!