Mesh gradient generator
Place up to six colour spots over a base colour and blend them into a soft mesh gradient. Copy the result as plain CSS made of radial gradients, or download it as a PNG for slides, wallpapers and social images.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Pick a base colour; it shows wherever the spots have faded out.
- Set each spot’s colour, size and position, or press Random colours for a new palette.
- Copy the CSS onto any element, or choose a size and download a PNG.
How it works
Each spot becomes radial-gradient(circle at X% Y%, colour 0, transparent S%). The circle is full colour at its centre and fades evenly to transparent at S % of the distance to the farthest corner. All spots sit in background-image over the background-color, and where they overlap their colours mix.
Example
The default has four spots: orange at 15 % / 20 %, violet at 85 % / 15 %, teal at 70 % / 85 % and yellow at 20 % / 80 %, over a light pink base. The first line of the CSS is background-color: #ffd6e0; followed by four radial gradients.
Tips
- Keep text readable: put the lightest area behind the headline, or add a semi-transparent overlay.
- Larger spots with more overlap give a smoother blend; small spots look like glowing dots.
- A grain texture on top hides colour banding on large screens; see the noise texture generator.
Frequently asked questions
Is this a real mesh gradient?
CSS has no mesh gradient type, so the effect is built the usual way for the web - several radial gradients, each a colour fading to transparent, layered over a base colour. The result looks like a mesh gradient and needs no image file.
How do the size and position sliders work?
Position is the centre of a spot as a percentage of the width and height. Size is how far the colour reaches before it has faded out, as a percentage of the distance from the centre to the farthest corner of the box, the same measure CSS uses.
Will the PNG look the same as the CSS?
Yes, for the same proportions. The PNG is drawn with the same centres, radii and fades on a canvas. The preview takes the shape of the chosen PNG size, and on an element with other proportions the CSS spots stretch with it.
Why does the spot order matter?
In CSS the first background image is drawn on top. Spot 1 therefore covers the others where they overlap; remove and re-add spots to change the order.