A mesh gradient blends several colour points across a surface instead of running along one line. On the web you can fake it with plain CSS by stacking one radial-gradient per point over a base colour. Drag the points below, set each colour and reach, then copy the CSS or save a PNG.
| You want | Use | Output |
|---|---|---|
| A still, soft blob background with no script | This mesh generator | CSS or PNG |
| A slowly moving background | Shader gradient generator | WebGL component |
| A straight, radial or conic two-to-five stop blend | CSS gradient generator | One gradient line |
Updated
Each point here becomes its own radial gradient, painted on top of a base colour. Because the result is ordinary CSS, it costs no download, needs no JavaScript on your site, and scales to any box size without blurring.
Drag numbered colour points on the canvas, set each colour and reach, then copy the CSS or download a PNG. Presets: Harbour, Apricot, Night shift, Meadow.
This is the Harbour preset written out by hand. Edit any value and the result updates in the frame.
Every radial-gradient is one colour point. Layers listed first sit on top of the ones after them.
<style>
.mesh { height: 170px; border-radius: 16px;
background-color: #e0ecff;
background-image:
radial-gradient(circle at 12% 18%, #4f98fb 0%, rgb(79 152 251 / 0) 55%),
radial-gradient(circle at 85% 12%, #a5f3fc 0%, rgb(165 243 252 / 0) 50%),
radial-gradient(circle at 78% 88%, #818cf8 0%, rgb(129 140 248 / 0) 60%),
radial-gradient(circle at 18% 85%, #f0abfc 0%, rgb(240 171 252 / 0) 45%); }
</style>
<div class="mesh"></div>| Setting | CSS part | Effect |
|---|---|---|
| Point position | circle at X% Y% | Where the colour is strongest |
| Point colour | first colour stop | The hue painted at that spot |
| Reach | second stop, e.g. 55% | Share of the distance to the farthest corner where the colour is fully clear |
| Base colour | background-color | What shows where no point reaches |
| Point order | order of layers | Earlier points cover later ones where they overlap |
background-image accepts a comma separated list, and the first layer listed is painted on top. Each layer here is a circle centred on one point, solid at the centre and clear at its reach, so neighbouring colours overlap and mix.
No size keyword is given, so each circle uses the default farthest-corner size, and the stop percentages scale with the box. A point near the centre therefore spreads less than one in a corner with the same reach, and a wide banner makes every circle larger, so preview at the aspect ratio you will really use.
Pick colours that sit near each other on the colour wheel for calm results, and add a single contrasting point for energy. Pull points partly off the edge to suggest the colour continues beyond the frame.
If you see visible banding on large dark gradients, add a faint noise texture image as an extra layer, or lighten the base a little.
Design apps such as vector editors build true meshes from a grid of patches. CSS has no mesh function, so this tool layers radial gradients, which gives the same soft, multi-colour feel for backgrounds and hero sections.
The shader tool draws an animated gradient with WebGL and exports a component that runs a script. This one makes a still image from CSS alone, so it renders instantly, prints, and works where scripts are blocked.
Fading to the keyword transparent can tint the edge towards grey in some interpolation modes. Ending each layer at the same red, green and blue with zero alpha keeps the fringe clean.
Yes. Put the declarations in a class in your stylesheet, or paste the background-image value into an arbitrary property such as [background-image:...] if you prefer to keep it inline.
Closely. The download is drawn on a canvas with the same points, colours and reach, but browsers may smooth canvas gradients slightly differently from CSS ones.
Related: Animated shader gradient generator, CSS gradient generator, CSS background generator, SVG pattern generator, Colour contrast checker.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.