Mesh gradient generator for animated backgrounds
Gradient & Background Studio is a gradient generator that runs in your browser. Pick from 13 gradient types, including mesh, aurora, conic, waves and radial rays, then shape the color, grain, glass and motion, or redraw it as halftone, dither, ASCII or contour lines, until the background feels right. Preview the result inside real layouts such as landing pages, cards and mobile screens before you take it to the UX Pilot canvas.
How it works
Pick a starting point
Start from one of 28 looks such as Soft Mesh, Eclipse Rays or Riso Halftone, or choose a gradient type and one of 24 palettes.
Tune the gradient
Adjust scale, distortion, swirl and softness, add grain, glass panes or glass tiles, a dot, grid or line overlay, a second blended layer or a treatment such as halftone or pixel sort, and switch animation on with its own speed.
Preview and use it
See the gradient in landing page, card, mobile and sign up layouts, then sign in with a free UX Pilot account to use it on the canvas or export it.
What you can make
Landing page heroes
Animated mesh and aurora backgrounds that sit behind a headline without fighting it.
Grainy gradient backgrounds
Add film grain and control its size for a textured, print-like gradient.
Social and share images
Frame the gradient at 1:1, 4:5, 3:2, 16:9 or 9:16 for posts, covers and share images.
App and card surfaces
Soft radial, glow and frosted glass looks for cards, empty states and mobile screens.
FAQ
What is a mesh gradient?
A mesh gradient blends several color points across a surface instead of along one line, which gives soft, organic color fields. In this tool Mesh is one of 13 gradient types, next to Flow, Aurora, Linear, Radial, Conic, Glow, Blobs, Waves, Bars, Columns, Rays and Orbit.
Can I make an animated gradient background?
Yes. Turn on Animate and set the speed. The preview plays in real time, and the grain can be animated too.
Can I make a grainy, holographic or halftone gradient?
Yes. Grain and grain size are built in, and palettes such as Iridescent Cloud and Opal give a holographic feel. Looks like Grainy Sunset and Prism Split are good starting points. The Treatment section redraws any gradient as Dither, Halftone, ASCII, Pixel, Contour, Engraving, Crosshatch or Pixel sort, in its own colors or in two duotone colors. Looks such as Riso Halftone, Topo Lines and Pixel Sort start from one.
Is the gradient generator free?
Exploring is free and runs in your browser. Using your result on the UX Pilot canvas or exporting it needs a free UX Pilot account.