Book a free 30 minute consultation
01246 927142 hello@blackswancyber.co.uk
Black Swan Cyber 295 x 88 Poppins

SVG Gradient Tool

Upload a white SVG, pick two colours, choose a direction and we’ll apply a smooth gradient for you.  No Illustrator. No guesswork. Just a finished SVG you can drop straight into your site or design.

SVG Gradient Filler

Upload a white SVG, choose two colours, set a gradient direction, preview, then download.

Best results when your shapes are pure white fills (e.g. #fff / #ffffff / white).

If your SVG uses off-white colours, gradients, embedded images, or CSS classes for fill, you may need to normalise it to white first.

Pick or type a hex code.

Pick or type a hex code.

Upload an SVG to see the preview.

How it works

  1. Upload a white SVG
    This works best when shapes use pure white fills (#fff / #ffffff)

  2. Choose your colours
    Pick from the colour picker or type a hex value (for example #0b65af)

  3. Select the gradient direction
    Use a preset (left-to-right, top-to-bottom, diagonal) or fine-tune with a custom angle

  4. Preview and download
    Check the result, then download the updated SVG

Good to know

  • You can optionally apply the gradient to strokes as well as fills

  • If nothing changes, your SVG may not be pure white – try exporting it again with flat fills

Tagged