SVG Gradient Tool (Designer Mode)
Upload a white SVG, pick a base colour, then choose a colour pairing style (monochrome, shades, warm/cool shift, complementary and more). Preview it instantly and download a clean SVG you can use anywhere.
SVG Gradient Filler (Designer mode)
Upload a white SVG, pick Colour A, choose a pairing style, swap A/B, save favourites, and download the updated SVG.
Best results when shapes are pure white fills (e.g. #fff / #ffffff / white).
Upload an SVG to see the preview.
Instructions (SVG Gradient Filler – Designer mode)
What this tool does
Upload a white SVG and replace the white areas with a smooth two-colour gradient. You can pick your own colours, get designer-style suggestions, reuse saved favourites, then download the updated SVG.
1) Upload your SVG
Click Upload SVG and choose your file.
For best results, the SVG should use pure white fills (
#fff,#ffffff, orwhite).If your design uses white outlines, tick Also apply gradient to strokes.
Tip: If the tool says it replaced 0 fills, your “white” might actually be an off-white (e.g. #f7f7f7) or set via a different style.
2) Choose your colours
Colour A: pick a colour or type a hex code (e.g.
#0B65AF)Colour B: pick/type a second colour, or let the tool suggest one
Swap A ↔ B
Click the ⇄ button to swap the two colours.
This keeps your chosen pair intact (it won’t generate a new colour during the swap).
Tip: Swapping colours doesn’t change the gradient direction — if you want the fade to run the other way, switch the direction dropdown.
3) Use designer suggestions (optional)
Pick a Suggestion style (Complementary, Analogous, Triadic, Shades, etc.).
If Auto-suggest Colour B is on, Colour B updates automatically when you change Colour A.
If Auto-suggest is off, you’ll see a suggested colour pill — tap it to apply that Colour B.
4) Save and reuse favourites
Add to favourites
Click Add to favourites to save the current Colour A + Colour B pair, along with the selected suggestion style and gradient direction.
Recent favourites
Your last 6–8 favourites appear as clickable chips with two colour swatches.
Click a chip to instantly load it.
View all
Click View all ▾ to open the full list.
Use Load or Remove for any saved favourite.
Clear all wipes favourites from this browser.
Note: favourites are saved in your browser only (they won’t sync between devices).
5) Choose the gradient direction
Pick a direction (Left→Right, Top→Bottom, Diagonals, etc.)
Choose Custom angle if you want full control (0–360°).
6) Apply and download
Click Apply gradient to update the SVG.
Check the Preview to confirm it looks right.
Click Download SVG to save the new version.