Mesh Gradient Generator
Creates a modern background with soft, multi-point blended color gradients (the Mesh Gradient style popular in modern web design), using layered, overlapping radial-gradient() with attractive random colors — distinct from the CSS Gradient tool, which creates a simple two-color gradient, and the Blob Pattern tool, which draws just one shape. You can control the number of color points and the base color, generate a new random pattern with one click, then copy the ready CSS code directly. Everything happens instantly in your browser, with nothing ever uploaded to a server.
All processing happens on your device — nothing is sent to a server.
CSS code
background-color: #f5f3ff; background-image: radial-gradient(at 34% 34%, #e4cd67 0px, transparent 50%), radial-gradient(at 66% 25%, #8de467 0px, transparent 50%), radial-gradient(at 84% 63%, #e4677a 0px, transparent 50%), radial-gradient(at 31% 33%, #67e482 0px, transparent 50%), radial-gradient(at 55% 55%, #cde467 0px, transparent 50%);
What this tool does
Generates a mesh gradient — a soft background with several colour focal points — from a base colour and a number of points you set, giving you the CSS.
When to use it
- A soft modern background for a section or landing page.
- A card or slide background.
- A richer alternative to a plain linear gradient.
How to use it
- Enter the "Base color".
- Set the "Number of color points".
- Press "Generate new random" until you like the result.
- Copy the "CSS code".
A practical example
Input
A base colour with four colour points.
Output
A soft background with four blended colour focal points, with ready CSS.
Limitations
- Each random generation produces a new arrangement and the previous one cannot be recovered; copy what you like immediately.
- Complex mesh gradients are heavier to render than a simple linear one.
- Text over a mesh gradient has a contrast that varies considerably with position; check it at the lightest and darkest areas.
Privacy and processing
The gradient is generated on your device and your colours never leave it.
Technical notes
- A mesh gradient is built from several overlaid radial gradients, which is why its code is longer and its rendering slightly heavier than a linear one.
Frequently Asked Questions
The CSS Gradient tool creates a simple linear or radial gradient between two colors, while this tool layers several random overlapping color points to create a soft, multi-color background in the modern Mesh Gradient style.