Overview
A canvas studio for aura-style mesh gradients: draggable color orbs layered as radial gradients over a base color, softened by a large blur and optionally grained with noise and animated. Six curated presets and a randomizer seed the composition, and the exporter produces plain CSS, animated CSS, a Tailwind snippet, standalone SVG or a React component.
How It Works
Drag orbs around the canvas or select one and adjust its color, position, size, opacity and blend mode; you need at least two orbs at all times. Set the background color and the blur amount, toggle the noise overlay and its opacity, and optionally enable animation. Pick an export format from CSS, animated CSS, Tailwind, SVG or React, then copy the generated code. Six presets such as Cyberpunk Neon and Pastel Dream reseed the whole composition in one click.
Step-by-Step Usage Guide
- Apply a preset or drag the default orbs into place.
- Tune the active orb's color, size, opacity and blend mode.
- Set background color, blur, noise and animation options.
- Choose an export format and copy the code.
Technical Specifications & Standards
Despite the name, the output is not a true mesh gradient with an interpolated control lattice; it is a stack of radial-gradient layers, each a colored circle fading to transparent at its size percentage, unified by a blur of typically 65 pixels on a wrapper that overflows by 20 percent on every side. That overflow matters: blur samples edge pixels and without it the corners grey out. The animated export wraps the layers in a ::before pseudo-element and runs a 12 second ease-in-out alternate keyframe that scales and rotates the blurred layer, so the colors appear to breathe without repainting gradients. The SVG export is genuinely different: it draws real circles under an feGaussianBlur filter, with an feTurbulence noise stage when the overlay is enabled. Tailwind export uses arbitrary bg-[image:...] values with underscores standing in for spaces.
Targeted Use Cases
- Hero and login-page backgrounds with rich ambient color.
- Product card backdrops that feel lit rather than flat.
- Animated aura banners for dark dashboards.
- Standalone SVG backdrops for emails or static sites.
Notes & Gotchas
- Keep the blur high; the layered-circle trick only reads as a mesh when heavily softened.
- Put darker orbs near the corners on dark themes so edges do not glow unintentionally.
- Use the animated export sparingly; a 12 second looping blur layer costs GPU on low-end devices.
- Check the exported Tailwind class compiles in your version, since arbitrary image values changed between major versions.
Frequently Asked Questions
Is this a real mesh gradient like Figma's?
Not technically. It layers radial gradients as soft colored circles and unifies them with a large blur, which produces the same visual effect as an interpolated mesh without the complex computation. The SVG export draws actual blurred circles instead.
Why do the gradient corners look washed out without the overscan?
Blur filters sample beyond the element and the edges fade. The exported CSS positions the gradient layer at inset: -20% precisely so the blur has margin to sample instead of greying the corners.
How does the animated export work?
It moves the gradient layers into a ::before pseudo-element and applies a 12 second alternate keyframe that scales and rotates the layer slightly. The gradients themselves are never recalculated; the whole blurred layer just drifts.
Can I delete orbs down to one?
No. The tool refuses to drop below two orbs and tells you so, since a single blurred circle stops looking like a mesh. Add as many as you like beyond that floor.