A mesh gradient generator that exports one animated SVG file.
Vayro's Mesh Gradient engine blends blurred colour points into aurora, dusk and vignette backgrounds, then exports a single self contained SVG with the drift animation inside it. Three modes, curated palettes, blur and spread controls. Free, no signup, and the file works anywhere SVG renders.
Mesh gradients from the engine
Click any background to open it in the engine.
Three mesh modes
Radial anchors one colour point at the centre and places satellites in the quadrants around it, with a spread control that pushes the halos past the canvas edge so every corner is covered. Linear turns the points into rotated horizontal bands for aurora and sunrise effects, with an angle control. Vignette places halos at the corners and edge midpoints for a soft framed look, with a staggered pulse.
Each point uses a nine stop radial gradient with a smooth falloff curve, so there is no banding even at low blur. Blur is a real SVG filter with generous padding, so the halos never seam at the edges.
Why the export is a single SVG
CSS cannot animate the position of an SVG gradient centre in a portable way. So the Mesh engine animates with native SVG animate elements on each point: slow, per axis drift with jittered direction, or a radius and opacity pulse in vignette mode. The animation lives inside the file. Drop the SVG in and it moves; there is no separate CSS to wire and no script.
The output is deterministic. Same seed, same gradient. Share links reproduce a mesh exactly, and PNG export rasterises the current frame at canvas resolution for OG images and social cards.
Three steps to a live background
- Step 1Pick a mode and palette
Radial, Linear or Vignette. Apply a palette or edit each colour point.
- Step 2Set blur, spread and motion
Soft or crisp, tight or edge to edge, still or drifting.
- Step 3Download the SVG
One file, animation included. Or Download PNG for a still.
Common questions
Is the mesh gradient generator free?
Yes, free to use with no account. Exports are yours.
Does the mesh gradient animate without JavaScript?
Yes. The drift uses native SVG animate elements inside the exported file. No script, no CSS to wire up.
Can I export a static mesh gradient?
Yes. Switch the preview to static and export, or use Download PNG for a raster at canvas size, useful for OG images.
How is this different from CSS mesh gradient generators?
CSS mesh tools give you a stack of radial-gradient declarations that are static and hard to animate. Vayro exports one SVG file with real blur and built in motion, and it renders identically everywhere.