Super Boring Tools

Search tools

Find a tool by name or what it does.

Mesh Gradient Generator

Drag color points around a canvas to build a smooth mesh gradient and copy the CSS.

Canvas
Points
#7C3AED · 20,25
#EC4899 · 80,20
#F59E0B · 30,78
#10B981 · 78,75
#0F172A
Output format
background-color: #0f172a;
background-image:
    radial-gradient(at 20% 25%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 80% 20%, #ec4899 0px, transparent 55%),
    radial-gradient(at 30% 78%, #f59e0b 0px, transparent 55%),
    radial-gradient(at 78% 75%, #10b981 0px, transparent 55%);
Selected point at 20 percent across and 25 percent down.

How to make a mesh gradient

  1. Drag the points

    Move each color point around the canvas to steer where its color pools and fades.

  2. Tune the blend

    Set the point count, softness, and base color so the colors melt together the way you want.

  3. Recolor points

    Pick a new color for any point, or shuffle the whole set for a fresh combination.

  4. Copy the code

    Choose CSS or SVG output and copy it straight into your stylesheet or markup.

Why use this tool

Draggable color points

Grab any point and slide it across the canvas. The blend updates live as you move it.

Layered radial blend

Each point is a soft radial spot, stacked into one seamless field that reads as a true mesh gradient.

Softness and base control

Dial the spread of every point and set a base fill so the colors have something to melt into.

CSS or SVG output

Copy a background shorthand for your stylesheet, or an SVG version for a portable image fallback.

Runs in your browser

Everything renders on your device as you edit. No upload, no signup, no waiting.

About this tool

A mesh gradient is a background where several colors bleed into each other from different spots, instead of the straight color-to-color band of a plain linear gradient. This generator builds that look by stacking soft radial color points into a single field, so the result stays smooth no matter how many colors you add.

Start with the canvas. Every colored dot is a point you can drag anywhere. Wherever you drop it, its color pools at full strength and fades out toward the edges. Overlapping points blend their colors in the middle, which is where the rich, painterly transitions come from. Add more points for a busier field, or pull them apart for calmer, wide washes.

The softness control sets how far each point spreads before it fades to nothing. Low softness gives tight, punchy spots with clear centers. High softness gives broad, hazy color that fills the whole canvas. The base color sits underneath every point and shows through the gaps, so a dark base deepens the mood while a light base keeps things airy.

When the blend looks right, copy it as a CSS background you can paste onto any element, or as an SVG for a self-contained image. If you like this, try the conic gradient generator, the radial gradient generator, or the gradient text generator.

Frequently asked questions

What is a mesh gradient?
A mesh gradient blends several colors that spread from different points across a surface, producing soft, painterly transitions rather than the single straight band of a linear gradient.
How does the CSS actually work?
Each color point becomes a soft radial spot, and the spots are stacked over a base fill. Layered together they read as one smooth mesh, all in plain CSS with no image file needed.
Can I drag the points?
Yes. Drag any point on the canvas to move where its color pools, and the whole blend recomputes live as you move it. You can also nudge a selected point with the arrow keys.
What is the difference between the CSS and SVG output?
The CSS output is a background shorthand you paste onto an element. The SVG output is a self-contained image you can use as a file or inline fallback where a stacked CSS background is not ideal.
Is my work uploaded anywhere?
No. The gradient is built and rendered entirely on your device. Nothing you make is uploaded or saved to a server.

Related tools