Gradient Image Generator
Create linear, radial or conic gradient images at any size and download them as PNG, JPG or WebP.
PNG · 1200 × 630 px · linear gradient · 2 colour stops
background: linear-gradient(135deg, #ff8a00 0%, #e52e71 100%);
How it works
Pick a gradient type — linear, radial or conic — set the angle, and add up to six colour stops with their own positions. The preview redraws instantly on every change, and the exact same gradient is exported at full resolution: choose a size preset (social banner, desktop wallpaper, square post, phone story) or type your own width and height, then download a PNG, JPG or WebP. The optional fine-grain overlay adds a barely visible pixel dither that hides the colour banding you often see in flat 8-bit gradients on large backgrounds.
Everything is drawn with the Canvas API inside your browser — no image is uploaded, no
service renders it for you, and the result carries no watermark. The matching CSS
background value is shown under the preview so you can use a real
linear-gradient() on the web and the exported bitmap wherever CSS is not an
option (email, slides, video, app splash screens). Copy a data URL to paste the whole
image straight into an <img src>.
Frequently asked questions
How do I make a gradient image online?
Choose a gradient type (linear, radial or conic), set the angle, then pick your colours — either from a preset or with the colour pickers, adding up to six stops with their own positions. Select a size preset or type your own width and height, and download the gradient as a PNG, JPG or WebP. The preview redraws instantly after every change, so there is nothing to submit or wait for.
How do I turn a CSS gradient into a PNG?
Match your CSS in the controls — the same type, angle and colour stops — and the exact CSS background value is printed under the preview so you can check it character by character. Then set the pixel size you need and click Download image to get a PNG (or JPG/WebP) of that gradient. This is handy for email templates, slide decks, video backgrounds and app splash screens where CSS gradients are not supported.
Are my gradient images uploaded to a server?
No. The gradient is drawn with your browser's Canvas API and encoded on your own device, so nothing is uploaded, stored or logged, and the images carry no watermark. The page keeps working offline once loaded, and you can use the results freely for personal or commercial projects.