Generate a Gradient Image
Make a two-colour linear gradient at any size and angle — a PNG you can drop straight into a design or a deck.
Describe the edit — the AI assistant does it on the canvas.
Free preview · No signup · ~10 seconds
Free downloads are 60% size. Create a free account for the full-resolution, lossless file.
Get the full-quality fileThe account is free. Exporting at full quality uses one credit — packs start at €0.99 for 3, with no subscription.
Building a gradient without an editor
Two stops and an angle
A linear gradient between two colours covers most of what gradients are actually used for. The angle rotates the axis: 90 degrees runs top to bottom, 0 runs left to right, and 45 gives the diagonal that reads as the default in most interfaces.
Picking colours that do not go muddy
Two colours close together on the wheel blend cleanly. Colours from opposite sides pass through grey in the middle, which is why a blue-to-orange gradient so often looks dirty. Stay within about a quarter turn unless the muddy midpoint is the effect you want.
When a file beats CSS
A CSS gradient is better on the web — it scales and costs nothing. A file is what you need for slides, video, email, print and anywhere else that will not run CSS. That is the gap this fills.
Generate at final size
Gradients scale badly when they are stretched a long way, picking up visible banding. Set the dimensions you actually need here rather than making one small file and resizing it.
Lossless output
The PNG holds the smooth ramp exactly. A JPG would add blocky artefacts across the transition, which is the one place they are most visible.
Gradient file or CSS gradient?
CSS gradient
Rendered by the browser
- Zero file weight
- Scales to any size
- Editable in the stylesheet
- Web only
Anything rendered in a browser
Slides, video, email or print
Gradient PNG
A real file
- Works anywhere an image works
- Fixed at the size you generate
- Lossless, no banding
- Needs regenerating to change
Decks, video frames, email headers, print
A responsive web background
How to generate a gradient image
Pick two colours
Keep them within about a quarter of the colour wheel to avoid a muddy midpoint.
Set angle and size
90 runs top to bottom, 0 left to right. Generate at the size you will use.
Download
Free preview, or the full-resolution PNG in the app.
Where a gradient file is useful
Slide backgrounds
Make a deck background at exact slide dimensions.
Social preview images
Generate a branded OG background in one step.
Email headers
Produce a gradient banner for a client that cannot run CSS.
Video backgrounds
Export a gradient frame for a title card or lower third.
Used by designers, indie devs & students at
What people use it for
The jobs the editor was built around — and what it does differently on each one.
Colourways you can revisit
Every edit is a layer, not a bake. When the brand shifts, reopen the file and change the colour rather than rebuilding the variant from the original.
Cutouts with awkward edges
AI background removal that keeps hair, foliage and soft shadows instead of stamping a hard outline around them. The output is a transparent PNG, ready to place.
No export, edit, re-import loop
The Framer plugin runs on the canvas you are already working in, so a recolour or a cutout does not mean a round trip through a second application.
Ten options in the time one used to take
Recolour once and step through the alternatives, so a client review can look at the whole range instead of the one version there was time to make.
Brand colours matched exactly
Pick a colour straight off an existing asset and get the hex, rather than eyeballing it against a screenshot and hoping it is close enough.
Free to preview, priced per export
Previewing is unlimited and costs nothing. A credit is spent only when you download a full-resolution file, so exploring an idea is never the expensive part.
Frequently Asked Questions
Related Tools
Guides worth reading
How to Fix Blurry or Fringed Edges on a Transparent PNG
Why your transparent PNG has a white halo, a grey fringe or soft edges — the four real causes, how to tell them apart in seconds, and the fix for each.
SVG vs PNG for Logos: Which File Do You Actually Need?
What SVG and PNG really are, where each one wins, why your developer keeps asking for the SVG, and the three files that cover almost every request.
How to Replace a Color in Photoshop (4 Methods, and Why the Edges Go Wrong)
Replace Color, Hue/Saturation on a targeted range, Color Range plus a fill layer, and Selective Color — which to use when, and why a recolored logo keeps a halo of the old color along its edges.
Generate a gradient
Two colours, an angle, any size.