Mesh gradient generator
Pick up to five colors, shuffle until it looks right, add grain, and take it away as a PNG for a hero or slide, or as CSS you can paste into a page.
Free, no sign-up. Runs in your browser.
How it works
Three steps
01
Pick a palette
Start from a preset or set each color yourself. Every color is one soft blob.
02
Shuffle and tune
Shuffle moves the blobs. Blur softens the edges and grain adds film texture so it never bands.
03
Export
Download a PNG at 1920×1080, 2560×1440, 3840×2160 or square, or copy the CSS layers.
From Lookbk
Want it moving on your landing page?
These skills have your agent build a full animated hero around a gradient like this one: headline, buttons and motion included.
- Mesh Gradient Grain HeroClaude CodeCodexCursor+3 more agents
- Aurora Curtain HeroClaude CodeCodexCursor+3 more agents
- Silk Ribbon HeroClaude CodeCodexCursor+3 more agents
- Lava Lamp HeroClaude CodeCodexCursor+3 more agents
FAQ
Questions
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesIs it free to use the gradients commercially?
Yes. Everything you export is yours, with no credit needed. The tool runs in your browser and nothing is uploaded.
Why add grain to a gradient?
Smooth gradients band on most screens and in video compression. A little noise hides the steps between shades, which is why most designed mesh backgrounds carry grain.
Does the CSS include the grain?
The CSS is the color layers only, as stacked radial gradients, so it stays light. Use the PNG when you want the grain baked in.
Can I animate the gradient?
This tool makes stills. The Mesh Gradient Grain Hero skill builds a moving version with WebGL for a landing page, and your agent can wire it up in one prompt.
Skills that make the finished thing
Free skills stay free. Pro is $99 a year for every skill, or $19 a month for 10 skills a month.