Mesh gradient
Palette
Saved palettes
What is a grainy mesh gradient?
A mesh gradient generator blends several radial color points into one smooth, organic wash of color, then drops a fine grain layer on top to kill banding and add the tactile, film-like texture you see across modern landing pages. Unlike a plain linear fade, a css mesh gradient places color exactly where you want it, so light seems to pool and drift rather than march in straight lines. Everything here renders as native CSS and SVG — no images to host, no canvas — so a grainy gradient stays razor-sharp at any screen size and weighs almost nothing.
How to build your gradient
- Drag the color nodes directly on the preview to move where each hue blooms — the background repaints 1:1 as you go.
- Open the Palette section to set each node's color with the swatch or a typed hex value, or click Analogous, Complementary, or Triadic for an instant harmonious scheme.
- Nudge the Grain amount and Grain frequency sliders to take the texture from a whisper to heavy film grain, and set the Background behind the nodes.
- Press Randomize to spring to a fresh seeded variation whenever you need a starting point.
- Click Copy CSS or Copy Tailwind, or export the whole design with Copy SVG, Download SVG, or Download PNG.
Design tips
Keep three or four nodes for a calm, premium feel; more nodes read busier fast. Place your lightest color where you want the eye to land and let darker tones fall to the edges to frame content. A little grain — around a quarter strength — is usually enough to stop 8-bit banding on large dark backgrounds without tipping into visible noise. If two colors turn muddy where they meet, choose neighbors on the color wheel or lean on the Analogous and Complementary presets to keep the blend clean.
Where to use it
Grainy mesh gradients shine as hero backgrounds, app onboarding screens, podcast and social cover art, slide decks, and section dividers. Because the output is a mesh gradient svg or a copy-paste CSS block, you can drop the same design into a React component, a Figma frame, or a static site with zero runtime cost. Randomize a few seeded variations to explore, and the tool keeps your recent designs so you can jump back to one you liked without starting over.
Frequently asked questions
Is this mesh gradient generator really free?
Yes, completely — no signup, no account, no watermark on your design. Every export does include a small, invisible code comment crediting MeshSVG in the CSS or SVG source, but it's plain text in the markup, never a visible mark on the gradient itself, and you're free to remove it.
How do I use a CSS mesh gradient as a website background?
Click Copy CSS in the export bar and paste the snippet straight into your stylesheet — it's a self-contained background-image value with no external files or build step required. Copy Tailwind gives the same result as an arbitrary-value utility class if your project uses Tailwind, and Download SVG or PNG cover anywhere you need a static image instead.
Why add grain or noise to a gradient?
Smooth color blends can band into visible stripes on large areas, especially dark ones, because screens only render a limited number of distinct color steps. A thin layer of grain breaks up that banding and gives the gradient a tactile, film-like texture instead of a flat, plasticky look — the same trick used across modern hero sections and app onboarding screens.
What's the difference between a mesh gradient and a regular linear gradient?
A linear or radial gradient blends color along a straight line or from a single point, so it always looks directional. A mesh gradient places several independent color nodes anywhere on the canvas and blends between all of them at once, producing an organic wash where color pools and drifts — something a plain css gradient can't do without layering multiple backgrounds by hand.
What file formats can I export?
Copy CSS and Copy Tailwind give you a ready-to-paste background-image snippet. Copy SVG and Download SVG hand you the same gradient plus grain as a self-contained vector file, and Download PNG renders it as a raster image up to 4K for anywhere a CSS background won’t work, like a print file or a social share image.
Can I use these gradients for commercial projects?
Yes. Every gradient you design and export here is free to use in personal and commercial work — client sites, SaaS products, marketing pages, app screens, print, anywhere — with no attribution required and no licensing fee, ever, whether you keep the default look or randomize it into something entirely your own.
Does this work offline, and where is my design saved?
Once the page loads, the whole tool runs locally in your browser — dragging nodes, tuning grain, and exporting all happen client-side with no server round-trip. Your current design, plus any recent designs and saved palettes, live only in your browser's localStorage, on your own device, until you clear your browser data.