Gradients Studio

The best mesh gradient generators in 2026, compared

Eleven tools for making mesh gradient backgrounds, side by side on what they export, grain, pixel and dither, animation, price and sign-up. Each one is the best pick for something; the short answer below says what.

Updated October 2026Facts checked

We make Gradients Studio, one of the 11, and we're not affiliated with the other 10. Their facts come from their own sites, linked on each card; where a site doesn't say, neither do we. Written by Anusandhan.

The short answer

The best tool for each job, in one line. Each name jumps to its details.

  • Best for free animated mesh gradients and video: Colorflow.

    Keyframe animation and MP4 export at up to 4K, free with no sign-up.

  • Best for grainy 4K images for product sites, launch posts and decks: Gradients Studio.

    Grain is rendered into every file, so dark blurs don't band; 5 free 4K exports a month.

  • Best for animated shaders with code export: InstantGradient.

    CSS and Tailwind free; React and JS shader code and MP4 on a $19 or $29 one-time pass.

  • Best for pixel and dither finishes on a still gradient: Gradients Studio.

    Pixel cells and Bayer, halftone or glyph dithering applied to the gradient itself. Colorflow has pixelation and halftone in motion.

  • Best for many graphics tools on one plan: MagicPattern.

    30+ tools, shader video and SVG, from $15 a month or a $49 three-month pass.

  • Best for working inside Figma: Mesh Gradient Figma plugin or Learn UI Design mesh generator.

    The free plugin edits the mesh in place; Learn UI Design copies SVG straight into Figma.

  • Best for CSS and design tokens: Colorffy.

    CSS, SCSS, Tailwind, Flutter and token export, free.

  • Best for free, no sign-up, at large custom sizes: Aurora Gradient.

    PNG, JPEG or WebP up to 7680px, plus CSS, with no account.

  • Best for live shaders in your own site: Paper Shaders.

    Open-source React and JS packages; the gradient runs on the page instead of shipping an image.

  • Best for one quick square gradient: meshgradient.com.

    Four colours, drag the points, save a 2000px PNG. Nothing to sign up for.

Side by side

Every tool on the same seven questions, checked October 19, 2026. Listed alphabetically.

YesPartlyNoNot stated
Mesh gradient generators: output, grain, pixel, dither, animation, price and sign-up, checked October 19, 2026
ToolOutputGrainPixelDitherAnimationPriceSign-up
Aurora GradientPNG, JPEG, WebP, CSS; custom sizes up to 7680pxNoise opacity and colourNoNoNoFree, “no limitations”No sign-up
ColorffyCSS, SCSS, Tailwind, tokens free; JPG, PNG, SVG, 4K under ProFilm-grain noise, 4.5–15%NoNoNot mentionedFree; Pro $5/mo or $40/yrNo sign-up for the free generator
ColorflowPNG, JPG, WebP at artboard size; MP4 at 1080p or 4KFilm Grain effectPixelation and halftone effectsNo dithering effect foundKeyframes, loops; MP4 videoFree, including commercial useNo sign-up
Gradients StudioJPEG up to 4K (3840 wide, or 2160 tall for portrait and square)Rendered into the exportPixel cells, blue-noise fadeBayer dots, halftone, glyphsMP4 loops, free up to 1080p; 4K on ProFree (5 exports a month at 4K); Pro $39 for 12 months or $9 for 7 days, one paymentFirst download needs none (HD); 4K needs a free account
InstantGradientPNG free (1×); 4K PNG and WebP, custom sizes and MP4 on a passGrain slider per shaderPixelate tool for uploaded imagesDithering tool for uploaded imagesAnimated; MP4 on a passFree; $19 for a year or $29 lifetime, one paymentNo sign-up to export
Learn UI Design mesh generatorSVG only (1:1, 3:2, 2:1)Noise with blend modesNoNoNoNo price or paywall shownNo sign-up
MagicPatternPNG, JPG, SVG (mesh); PNG, JPG, MP4, WebM (shader)Grain filter; film grain in the shader editorPixelation in a separate image toolDithering in the shader editorLooping MP4 and WebMBasic $15/mo ($120/yr), Pro $30/mo ($240/yr); passes $49 (3 mo), $79 (6 mo)Log in to export; free exports watermarked
Mesh Gradient Figma pluginA gradient image in Figma; size not statedNot statedNoNoNoFreeNeeds a Figma account
meshgradient.comOne PNG, 2000 × 2000 (from its export code)NoNoNoNoFreeNo sign-up
Noise GradientPNG and SVG, longest edge up to 2000pxNoise, film or scanlines, blend modesNoNoNoFreeNo sign-up, no watermark
Paper ShadersLive canvas in your app (npm); video export in the Paper app on ProGrain gradient shaderNo pixelate shaderDithering shaderAnimated, liveFree, Apache 2.0; Paper app Pro $20/moNo, it's a code library

Each tool, in detail

What it is, what it's best at, and where it falls short. Listed alphabetically.

Aurora Gradient

auroragradient.com

A free generator for fluid, linear and radial gradients with noise and CSS output.

  • Best for free, no sign-up, at large custom sizes
Output
PNG, JPEG, WebP, CSS; custom sizes up to 7680px
Grain
Noise opacity and colour
Pixel
No
Dither
No
Animation
No
Price
Free, “no limitations”
Sign-up
No sign-up

Where it wins. Free, large custom sizes, CSS output, and commercial use without attribution.

Watch out for. No accounts: a design lives in its URL. The maker isn't named on the site.

Checked October 19, 2026 on auroragradient.com

Colorffy

colorffy.com

A gradient and colour tool whose mesh generator stacks radial gradients in CSS, with code and design-token export.

  • Best for CSS and design tokens
Output
CSS, SCSS, Tailwind, tokens free; JPG, PNG, SVG, 4K under Pro
Grain
Film-grain noise, 4.5–15%
Pixel
No
Dither
No
Animation
Not mentioned
Price
Free; Pro $5/mo or $40/yr
Sign-up
No sign-up for the free generator

Where it wins. Far more code and token output than any image tool, and a mesh that stays live CSS.

Watch out for. Image downloads are labelled Pro on the generator pages (its pricing page reads differently), and the mesh is stacked radial gradients.

Checked October 19, 2026 on colorffy.com/mesh-gradient-generator, colorffy.com/gradient-generator, colorffy.com/pricing

Colorflow

colorflow.ls.graphics

A free WebGL mesh gradient editor from LS Graphics, with control points, keyframe animation, effects, and Figma and Framer plugins.

  • Best for free animated mesh gradients and video
Output
PNG, JPG, WebP at artboard size; MP4 at 1080p or 4K
Grain
Film Grain effect
Pixel
Pixelation and halftone effects
Dither
No dithering effect found
Animation
Keyframes, loops; MP4 video
Price
Free, including commercial use
Sign-up
No sign-up

Where it wins. Free animated mesh gradients with 4K video export, real point-and-handle editing, and effects like grain, pixelation and halftone.

Watch out for. A full editor with a learning curve; no stated maximum image size, and no dither finish.

Checked October 19, 2026 on colorflow.ls.graphics

Gradients Studio

Ours

A browser studio for mesh gradient background images with grain rendered into the file: four styles (blobs, stripes, clouds, rays), pixel and dither finishes, an app inside ChatGPT and an MCP server for coding agents.

  • Best for grainy 4K images for product sites, launch posts and decks
  • Best for pixel and dither finishes on a still gradient
Output
JPEG up to 4K (3840 wide, or 2160 tall for portrait and square)
Grain
Rendered into the export
Pixel
Pixel cells, blue-noise fade
Dither
Bayer dots, halftone, glyphs
Animation
MP4 loops, free up to 1080p; 4K on Pro
Price
Free (5 exports a month at 4K); Pro $39 for 12 months or $9 for 7 days, one payment
Sign-up
First download needs none (HD); 4K needs a free account

Where it wins. Grain that holds up at 4K, every size from one design, pixel and dither finishes, and the same design reopens from a saved link.

Watch out for. No CSS, SVG, GIF or WebM; the free plan is 5 exports a month, free videos are 1080p with an end card, and finishes and video in 4K need Pro.

Start from a look

Or from Claude Code and Cursor, with the MCP server.

InstantGradient

instantgradient.com

A mesh gradient generator built on 10+ animated WebGL shaders, with image, video and code export, plus free effect tools for your own images.

  • Best for animated shaders with code export
Output
PNG free (1×); 4K PNG and WebP, custom sizes and MP4 on a pass
Grain
Grain slider per shader
Pixel
Pixelate tool for uploaded images
Dither
Dithering tool for uploaded images
Animation
Animated; MP4 on a pass
Price
Free; $19 for a year or $29 lifetime, one payment
Sign-up
No sign-up to export

Where it wins. Animation, video and code (CSS and Tailwind free, React and JS shaders on a pass), no sign-up, and cheaper passes than ours.

Watch out for. Free exports are 1× PNG; 4K, custom sizes and video need a pass. Its dither and pixelate tools work on uploaded images, not inside the gradient editor.

Checked October 19, 2026 on instantgradient.com, instantgradient.com/pricing, instantgradient.com/tools/image-dithering

Learn UI Design mesh generator

learnui.design

Erik Kennedy's mesh generator: shuffled, blurred colour swatches with noise, exported as SVG or copied straight into Figma.

  • Best for working inside Figma
Output
SVG only (1:1, 3:2, 2:1)
Grain
Noise with blend modes
Pixel
No
Dither
No
Animation
No
Price
No price or paywall shown
Sign-up
No sign-up

Where it wins. SVG that pastes into Figma, with noise, from a designer-run site.

Watch out for. SVG only, three aspect ratios, and no raster export.

Checked October 19, 2026 on learnui.design/tools/mesh-gradient-generator.html

MagicPattern

magicpattern.design

A suite of 30+ graphics tools, including a mesh gradient maker, an animated shader gradient editor and a Figma plugin.

  • Best for many graphics tools on one plan
Output
PNG, JPG, SVG (mesh); PNG, JPG, MP4, WebM (shader)
Grain
Grain filter; film grain in the shader editor
Pixel
Pixelation in a separate image tool
Dither
Dithering in the shader editor
Animation
Looping MP4 and WebM
Price
Basic $15/mo ($120/yr), Pro $30/mo ($240/yr); passes $49 (3 mo), $79 (6 mo)
Sign-up
Log in to export; free exports watermarked

Where it wins. Breadth (patterns, textures, shader video, SVG) on one plan, and a Figma plugin with 18 of its tools.

Watch out for. A subscription; the mesh tool is listed as Pro, and free exports carry a watermark.

Checked October 19, 2026 on magicpattern.design/tools/mesh-gradients, magicpattern.design/tools/category/gradients, magicpattern.design/tools/shader-background-generator, magicpattern.design/pricing

Mesh Gradient Figma plugin

figma.com

A free Figma plugin by Gautham that renders a gradient image from a 2D mesh whose vertices and edges you edit.

  • Best for working inside Figma
Output
A gradient image in Figma; size not stated
Grain
Not stated
Pixel
No
Dither
No
Animation
No
Price
Free
Sign-up
Needs a Figma account

Where it wins. It lives where the design is, works in Figma Slides too, and has 145k+ installs.

Watch out for. Figma only; the listing doesn't state output size or any grain control.

Checked October 19, 2026 on figma.com/community/plugin/958202093377483021/mesh-gradient

meshgradient.com

meshgradient.com

MESH, a free single-page WebGL tool by Burak Aslan: four corner colours, click to add points, drag to warp.

  • Best for one quick square gradient
Output
One PNG, 2000 × 2000 (from its export code)
Grain
No
Pixel
No
Dither
No
Animation
No
Price
Free
Sign-up
No sign-up

Where it wins. The quickest free square gradient: no account, nothing to learn.

Watch out for. Square PNG only, no grain, and the site's files were last modified in October 2023.

Checked October 19, 2026 on meshgradient.com, meshgradient.com/mesh.js

Noise Gradient

noisegradient.com

A browser generator for organic, linear, radial and conic backgrounds with noise, film or scanline textures.

Output
PNG and SVG, longest edge up to 2000px
Grain
Noise, film or scanlines, blend modes
Pixel
No
Dither
No
Animation
No
Price
Free
Sign-up
No sign-up, no watermark

Where it wins. Free with no sign-up or watermark, SVG export, and six texture blend modes.

Watch out for. 2000px maximum, below 4K.

Checked October 19, 2026 on noisegradient.com

Paper Shaders

shaders.paper.design

An open-source library of 30 canvas shaders (mesh gradient, grain gradient, dithering, halftone and more) for React and plain JS.

  • Best for live shaders in your own site
Output
Live canvas in your app (npm); video export in the Paper app on Pro
Grain
Grain gradient shader
Pixel
No pixelate shader
Dither
Dithering shader
Animation
Animated, live
Price
Free, Apache 2.0; Paper app Pro $20/mo
Sign-up
No, it's a code library

Where it wins. Free, animated and live on the page, with no image to ship.

Watch out for. Needs code (the packages are pre-1.0 and warn of breaking changes); exporting video goes through the paid Paper app.

Checked October 19, 2026 on shaders.paper.design, github.com/paper-design/shaders, paper.design/pricing

What ours look like

Four looks from Gradients Studio, each exported at 4K. Each picture opens the generator that makes it.

How we compared

We picked the tools that come up when people search for a mesh gradient generator on Google and Bing, and the ones AI answers name, then kept one of each kind: image studios, animated editors, a Figma plugin, CSS tools, a shader library and simple free pages.

For each, we read its own homepage, tool page and pricing page on the date above, and where a page needed JavaScript, its published code. We wrote down only what the tool says or plainly does. Where its own pages disagree, the card says so.

Prices and limits change. If something here is out of date, write to hello@gradients.studio and we'll fix it.

Questions

What is the best mesh gradient generator?
It depends on the job. For grainy still backgrounds at 4K (sites, launch posts, decks): Gradients Studio. For free animated mesh gradients and video: Colorflow. For animation plus code export: InstantGradient. For many tools on one plan: MagicPattern. Inside Figma: the Mesh Gradient plugin. For CSS: Colorffy. For live shaders in code: Paper Shaders.
What is the best free mesh gradient generator?
Colorflow, Aurora Gradient, Noise Gradient and meshgradient.com are free with no sign-up. Colorflow is the most capable (animation, 4K video); Aurora Gradient exports up to 7680px. Gradients Studio's free plan gives 5 free 4K exports a month with grain and no watermark, and the first download needs no account.
Which mesh gradient generator exports at 4K?
Gradients Studio exports 4K on its free plan (3840 wide, or 2160 tall for portrait and square). Colorflow exports 4K MP4 video for free. InstantGradient exports 4K on its paid passes. Aurora Gradient allows custom sizes up to 7680px. Noise Gradient tops out at 2000px, and meshgradient.com saves 2000 × 2000.
Which mesh gradient generator has grain?
Gradients Studio (rendered into the export), InstantGradient, Colorflow, MagicPattern, Colorffy, Aurora Gradient, Noise Gradient, Learn UI Design and Paper Shaders all have a grain or noise control. meshgradient.com doesn't.
Can I make an animated mesh gradient?
Yes: Colorflow (free, MP4 up to 4K), InstantGradient (MP4 on a pass) and MagicPattern's shader editor (MP4 and WebM) export video, and Paper Shaders animates live in your own site. Gradients Studio turns any gradient into a seamless MP4 loop of 5 to 30 seconds: free up to 1080p with a short end card, or 4K at 60 fps with no card on Pro.

Need a grainy 4K background today?

First download needs no account. 5 free 4K exports a month, or $39 for 12 months.

Open the studio