Extract Color Palette From Image
Pull the dominant colours out of any photo.
Mesh Gradient Generator
Create soft multi-colour mesh gradient backgrounds.
Mesh gradient
Quick Tool Overview
The Mesh Gradient Generator builds the soft multi-colour backgrounds that became the default for hero sections — several colour points bleeding into each other from different directions. Randomisation produces harmonious combinations, the seed can be locked, and the output is either an image or a stack of CSS radial gradients.
- What it does
- Creates soft multi-colour mesh gradients
- You give it
- Colour points, or just press randomise
- You get back
- An image at any size, or CSS
- Best for
- Hero sections, cards and app backgrounds
About the Mesh Gradient Generator
The mesh gradient — several colours bleeding softly into each other from different corners — became the default hero background because it is warm, distinctive, and impossible to get from a single linear gradient.
Here it is built from overlapping radial gradients at positions you can move, with as many colour points as you want. A randomise button generates harmonious combinations, and the seed can be locked so a result you like is reproducible rather than lost on the next click. Output is either an image at any resolution or the equivalent CSS, which is a stack of radial-gradient layers and costs nothing to load.
Key features of the Mesh Gradient Generator
Harmonious randomisation
The generator picks colour combinations that work together rather than arbitrary ones, so most rolls are usable.
Lockable seed
A result you like can be reproduced exactly rather than lost on the next click.
Movable colour points
Each point's position, colour and spread is adjustable, so a random start can be refined.
Image or CSS
A rendered file for slides and email, or a stack of radial-gradient layers that costs no bandwidth on the web.
Any resolution
Render at 4K for a wallpaper or small for a card, from the same settings.
How to use the Mesh Gradient Generator
-
1
Randomise until something works
The generator produces harmonious combinations rather than arbitrary ones.
-
2
Adjust the points
Move each colour point and change its colour and spread.
-
3
Lock the seed
When you like a result, lock it so it can be reproduced.
-
4
Take the image or the CSS
An image at any resolution, or a stack of radial-gradient layers.
Frequently asked questions
A background where several colour points bleed softly into each other in different directions, rather than blending along a single axis as a linear gradient does.
CSS where a browser will render it — it costs no bandwidth and scales to any viewport. The image for presentations, email and anywhere CSS is not available.
Three to five. Fewer looks like an ordinary gradient; more turns muddy where the colours overlap.
Lock the seed. The randomisation is seeded, so the same seed with the same settings reproduces the gradient exactly.
Reviews of the Mesh Gradient Generator
What people who use the Mesh Gradient Generator think of it. Reviews come from visitors and are posted as written.
No ratings yet
Yours would be the first.
- 5 0 reviews rated 5 stars
- 4 0 reviews rated 4 stars
- 3 0 reviews rated 3 stars
- 2 0 reviews rated 2 stars
- 1 0 reviews rated 1 star
0 reviews
Newest first
No reviews yet
Be the first to rate the Mesh Gradient Generator. It takes half a minute and no account.
Write the first reviewMore image tools
Image Color Replacer
Swap one colour in an image for another.
Noise Texture Generator
Generate seamless noise and grain textures.
Favicon Package Generator
Generate every favicon size plus the manifest and HTML.
Add Watermark to Image
Stamp text or a logo across a photo, tiled or in one corner.
Compress Image to Size
Compress until the file fits a size you specify exactly.
Image Resizer
Resize images to exact pixel dimensions or by percentage.
Image Blur Tool
Blur a whole photo, or just the part you drag over.