About the Mesh Gradient Generator
This mesh gradient generator creates the soft, multi-colour blurred backgrounds popular in modern landing pages, app splash screens and social graphics. Choose a base colour and up to five accent colours, adjust how far each colour spreads, and type any word as a seed to shuffle where the colour blobs sit. Copy the result as pure CSS — no images to load — or download it as a PNG at any size.
It is built for web designers who want an eye-catching hero background without heavy image files, developers who need a CSS-only gradient that scales to any screen, and marketers making wallpapers, thumbnails and slide backgrounds.
The mesh is made from layered CSS radial gradients, each fading from a solid colour to fully transparent, over a solid base. The same seed and colours always give the same layout, so you can share or reproduce a design exactly; change the seed to explore new arrangements.
How to use the mesh gradient generator
- 1Pick a base colour for the background.
- 2Choose two to five accent colours as hex codes.
- 3Adjust the blob size until the colours blend the way you like.
- 4Type different seed words to try new arrangements.
- 5Copy the CSS, or set a size and download the PNG.
Formula and method
Each accent colour becomes one elliptical radial gradient whose horizontal and vertical radii are the blob size as a percentage of the element’s width and height. The colour is solid at the centre and fades linearly to the same colour at zero opacity at the edge, which avoids the greyish fringe that fading to plain black-transparent can cause.
Blob centres come from a seeded pseudo-random generator (Mulberry32, seeded by an FNV-1a hash of your seed text), so the same seed always yields the same positions. Layers stack over the solid base colour, with the first listed drawn on top, and overlapping translucent edges blend into the soft mesh look. The PNG export redraws the same ellipses on a canvas at the size you choose.
- r
- Blob size (% of width and height)
- xᵢ, yᵢ
- Centre of colour i as % of width and height
- seed
- Text that fixes the pseudo-random layout
Worked examples
Default four-colour aurora mesh
Four accent colours produce four radial layers. The seed "aurora" places the pink, indigo, green and amber blobs at 59%/45%, 1%/32%, 71%/27% and 33%/46% of the width and height.
Three-colour sunset with a new seed
Clearing the fourth colour leaves three layers, and the seed "sunset" moves them to new positions over a warm cream base.
Square social graphic export
Setting 1080 × 1080 exports a square PNG for social posts; a larger 80% blob size makes the colours overlap more for a smoother blend.
Frequently asked questions
What is a mesh gradient?+
A mesh gradient blends several colours across a surface in different directions, rather than along one line like a linear gradient. On the web it is usually approximated by layering soft radial gradients.
Can I make a mesh gradient with pure CSS?+
Yes. Stack several radial-gradient() layers in background-image over a background-color. This tool writes that CSS for you, and it works in all modern browsers without any image file.
Is CSS or PNG better for a website background?+
CSS is usually better: it is a few hundred bytes, scales to any screen and needs no extra request. Use the PNG for places that do not accept CSS, such as slides, social posts or email.
How do I get the same gradient again?+
Use the same colours, blob size and seed word. The layout is generated deterministically from the seed, so it is reproduced exactly every time.
How do I keep text readable on a mesh gradient?+
Use soft, light or dark colour families rather than mixing extremes, and check contrast of your text against the lightest and darkest areas with a contrast checker.