Gradient guide
About this svg gradient generator and colour tool
Colour an SVG with a gradient
Upload an SVG and choose Tint to use its visible shape as a mask. A flat colour or selected linear, radial or conic gradient fills the artwork without editing the original file.
Add a gradient behind a logo or icon
Choose Original to preserve the uploaded artwork and place it above the background layers. This is useful for exporting social artwork, cards and logo lockups with a designed background.
Blend a gradient over an image
Choose Overlay to combine the gradient with an SVG, PNG, JPG or WebP using normal, multiply, screen, overlay or soft-light blending. Adjust strength before exporting.
Frequently asked questions
Can I add a gradient to an SVG?
Yes. Upload the SVG and choose Tint to fill its visible shape with the gradient.
Does the original SVG get changed?
No. The original file remains unchanged; the preview and export are created locally in your browser.
Can I use a transparent PNG instead?
Yes. SVG, PNG, JPG and WebP uploads are supported, including tinting transparent artwork.
Can I export the finished artwork as SVG?
Yes. The downloaded SVG embeds the composition and any uploaded artwork in one self-contained file.