Mesh gradients without the subscription
A linear gradient goes one way. A radial gradient goes out from a point. A mesh gradient goes wherever you put the colours, which is why every soft, expensive-looking background of the last few years is one.
Open the editorNo sign-up, no download. It opens on a blank canvas.
What a mesh gradient is
A grid of control points laid over a shape, each holding a colour, with the colour between them interpolated smoothly in two dimensions. Instead of a single axis of blend you get a field, and you shape it by dragging points and their handles.
It is the difference between a sky that fades from blue to orange and one that has a warm patch where the sun actually is.
Making one
- Draw a shapeAny filled path — a rectangle is the usual starting point for a background.
- Press UThe mesh tool. It builds a mesh over the selected shape.
- Set colours at the pointsSelect a mesh point and give it a colour. The surrounding blend updates as you go.
- Shape the flowDrag points and their handles to push colour around — a mesh point is a bezier control point, not just a grid coordinate.
- Export⇧⌘E. SVG keeps it as vector artwork; PNG at 2×–4× is the safer choice for a background you are placing into a web page.
Mesh gradients are one of the least evenly supported corners of SVG across renderers. If the artwork is going somewhere you do not control, exporting PNG removes the risk of it landing somewhere that renders it flat.
The rest of the fill toolkit
- Linear and radial gradients, edited directly on the canvas rather than in a dialog.
- Solid fills with an eyedropper (I) that samples what is actually on screen.
- Strokes with dash patterns and variable width profiles.
- Blurs, drop shadows and blend modes.
- Clipping masks, for constraining any of the above to a shape.
Dadaki is free and the editor is open source under the MIT licence — the whole thing is on GitHub. There is no watermark, no export limit and no paid tier gating the drawing tools. An optional account adds cloud sync and shared team files; everything else works signed out.
Open the editorNo sign-up, no download. It opens on a blank canvas.
Questions
Can I make mesh gradients for free?
Yes. Dadaki's mesh tool is free and runs in the browser with no account — press U with a shape selected.
Should I export a mesh gradient as SVG or PNG?
PNG if the artwork is going somewhere you do not control, because mesh gradient support in SVG renderers is uneven. SVG if you need it to stay resolution-independent and editable.
What is the difference from a radial gradient?
A radial gradient blends outward from one centre along one axis. A mesh gradient interpolates colour across a two-dimensional grid of control points, so colour can flow in several directions at once within a single shape.