Gradient Image Generator
Create linear or radial gradient images between two or three colours.
Angle is ignored for radial gradients (they spread from the centre).
What Is This Tool?
This tool paints a CSS-style gradient onto a canvas and exports it as an image file. Choose linear (with an angle) or radial, two or three colour stops, and any output size. Gradient backgrounds are useful when you need an actual image file rather than CSS — for emails, social cards, or slide backgrounds.
How It Works
Set the Width and Height.
Choose Linear or Radial and set the angle.
Pick two (or three) colours.
Click Download gradient.
Everything runs locally in your browser — the image you choose is decoded onto an HTML canvas on your own device and is never uploaded to a server.
Features
- Linear and radial gradients
- Two or three colour stops
- Adjustable angle for linear
- Any output dimensions
- Rendered in the browser
Common Use Cases
- Making a gradient background for an email header
- Creating a colourful social share image base
- Generating slide or hero backgrounds
- Producing a gradient texture for a design mockup
Frequently Asked Questions
Why not just use CSS gradients?
CSS is best when you control the page. You need a real image file for email clients, some CMS image fields, video editors, and printing — that is what this tool produces.
Can I add more than three colours?
This version supports two or three stops, evenly spaced. For complex multi-stop gradients, build it in a design tool.
Does the angle affect radial gradients?
No. Radial gradients always spread from the centre outward, so the angle control only applies to linear.
Which format should I pick?
JPEG or WebP for smooth gradients (small files, no visible banding at high quality). PNG can band unless the gradient is short.
Is anything uploaded?
No, the gradient is generated locally.