Put a gradient background behind a photo Your own gradient, behind any photo.
Pick two to four colours, a direction or a glow, and download.
or drop it here · paste with Ctrl+V
Free · No sign-up · Photos stay on your device
Works with JPG, PNG, WebP, HEIC from an iPhone, GIF and BMP.
Open a photograph and the subject lands on a three-colour gradient you can rebuild — up to four colours, any angle or a radial light, mixed so the middle stays clean and dithered so the saved file has no stripes.
What this mode does
The canvas opens on a blue, lilac and coral gradient at 135 degrees, mixed in OKLab and dithered, with the builder open under Background. Every control changes the ground only: the subject's outline, edge and light are the same as on any other route.
The twelve studio grounds are here too. Pick one under Try it on, then Edit this gradient to change its colours or move its light — the studio look becomes the starting point rather than the only choice.
Steps
- Open the photographAny picture with a clear subject. People, products and pets all work; the outline is found in this tab.
- Set the coloursClick a swatch to change it, add a third or fourth, or remove one. Two close colours make a soft studio wash; two far apart make a bold poster ground.
- Choose linear or radialLinear takes an angle. Radial takes a centre and a size — put the centre behind the subject's head for a lit-from-behind look.
- SaveChoose JPEG for photos and PNG for graphics with large flat areas. The gradient is drawn again at the full canvas size, so it is as smooth in the file as on screen.
Soft wash or bold poster
For headshots and products, keep the colours close in brightness and let the gradient do little more than separate the subject from the frame: a pale grey into a paler blue, a cream into a light peach. For social posts and thumbnails, go far apart in hue and let OKLab keep the middle vivid.
A subject whose edges are close in colour to one end of the gradient will blend into it there. The edge-contrast warning under a solid colour does the same job; with a gradient, turn the angle so the contrasting end sits behind the hair.
What it cannot do
- Stops are evenly spaced; there is no handle to push one colour further along the ramp.
- Mesh gradients, noise textures and patterns are not part of this builder — the drawn backdrops under Background images cover textures.
- There is no generated scene: a gradient is colour, never a place.
Questions about gradient background
What does mixing in OKLab change?
Where two colours meet. Mixed the plain way, a blue running into an orange passes through a dull grey in the middle; mixed in OKLab, a colour space built so equal steps look equal, the middle stays bright and the ramp looks even. Switch it off if you want the result to match a CSS gradient exactly.
Why would a gradient show stripes, and what does dither do?
An 8-bit file has 256 levels per channel. A long, gentle ramp from one pale colour to another may only cross a dozen of them, and each step shows as a band. Dither adds a fixed four-by-four pattern smaller than one level, which the eye averages into a smooth ramp. It is on by default; turn it off for flat artwork you will edit later.
Can I use more than two colours?
Up to four, evenly spaced along the gradient. Add a colour, then click any swatch to change it; remove one with the link under it.
Linear or radial?
Linear runs across the frame at the angle you set — 180° is top to bottom, 90° is left to right. Radial spreads out from a centre you can move, which reads like a light aimed at the subject; size sets how far the first colour reaches.
Is the photo uploaded to draw the gradient?
No. The gradient is arithmetic in this tab, drawn at the canvas size you save, and the subject is cut out here too. Nothing about your picture leaves the device.
Related
- Studio backgroundsTwelve seamless studio grounds, previewed with your own subject and matched for light and shadow.
- Background colour changerAny colour behind the subject: a full picker, hex, RGB and OKLCH, and an eyedropper that reads your own photo.
- Profile picture backgroundA square canvas with the circle crop drawn on it, and WhatsApp, Instagram and LinkedIn sizes.
- Background imagesForty-eight backdrops drawn for this site, each tried on with your own subject.
The image you open is read by this page and by nothing else — there is no server behind this domain that could receive it, the outline is worked out inside your own browser either by arithmetic or by an on-device model, and if you ask for a model it is the model that is downloaded to you rather than your photo being sent to it.
