Gradient
Two-colour linear gradient export.
This runs in your browser. Nothing is uploaded.
About Gradient
Builds a two-colour linear gradient as a PNG at any size you set, drawn on a canvas in your browser, and prints the matching CSS gradient string alongside it.
Gradient backgrounds turn up in slide decks, app splash screens, social cards and empty-state illustrations, and the usual way to get one is a gradient gallery that wants an account before it will export anything above a thumbnail. The CSS generators have the opposite problem: they hand you a stylesheet snippet, which is no help when the thing you actually need is an image file for Figma, Keynote or a video editor.
Pick two colours and a size, and the page draws a linear gradient across the diagonal of a canvas — top-left corner to bottom-right — then exports it as a PNG. The same two stops are printed underneath as a linear-gradient(135deg, …) declaration, so if the target is a web page you can take the CSS line and skip the file entirely.
The geometry is fixed: two stops, one diagonal angle, no radial or conic option, no mid-stop. If you need a three-colour mesh or a precise 20-degree sweep, this will not get you there. Large exports can also show banding, because a PNG has 256 levels per channel and a 4000-pixel stretch between two similar colours asks for more gradations than that.
How to use Gradient
- 1Set the width and height in pixels.
- 2Pick the start and end colours with the two swatches.
- 3Click Generate & download to save the PNG.
- 4Copy the CSS line underneath if you would rather do it in the stylesheet.
What it won't do
- Two colour stops only, on a fixed 135-degree diagonal.
- No radial, conic or repeating gradients.
- Very large exports can show visible banding between close colours.
Common questions
Should I use a CSS gradient or a PNG image?
Use the CSS gradient whenever the target is a web page. It costs no bytes, scales to any viewport without resampling, and stays sharp on high-density screens. Export the PNG when you need a real file — a slide background, a Figma fill, a layer in a video editor, or the background plate for a social card.
Why does my gradient look banded?
Banding comes from 8-bit colour. Each channel has 256 steps, so a gradient stretched across 3000 pixels has to hold each step for a dozen pixels, and your eye reads those boundaries as stripes. Subtle gradients between close colours band worst. A CSS gradient has the same limit, but browsers dither theirs slightly better.
Can I make a radial gradient?
No. The output is a two-stop linear gradient running corner to corner. Radial, conic and repeating gradients are not available here, and neither is an angle control. For those, write the CSS by hand or build the fill in a vector editor and export from there.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation