Gradient from a photo
Build a soft mesh gradient from several colors or take the palette from your own photo. Drag the color points right on the canvas, add warp and grain, download the image or copy the CSS.
Your browser does not support WebGL, so the tool cannot start. Try another browser or turn on hardware acceleration.
Hover over the canvas to see the color points: drag them, double-click to add a color. Drop a photo onto the canvas or paste it from the clipboard.Drag the color points with your finger; double-tap to add a color.
Colors follow the order of the list. To flip it, use the Reverse order button.
CSS
Exact for linear, radial and conic. For mesh and mosaic it is a similar background made of radial spots, without warp and grain.
Your own gradient in a minute
- 1Pick the colorsfrom the palette, at random or from your photo
- 2Move the pointsand tune the warp and grain
- 3DownloadPNG, JPG, WebP, SVG, or copy the CSS
What these gradients are
A mesh gradient is built from several color points: each one colors the area around it, and the colors blend smoothly in between. Such backgrounds sit behind covers, banners, stories and app screens. The Softness slider decides how widely the colors blend, and Mosaic cuts the canvas into zones by the nearest point. Linear, radial and conic are classic gradients that translate exactly into CSS.
Palette from a photo
Upload a photo and the tool finds up to seven main colors in it and places the points where those colors live in the picture. The gradient then carries the mood of the photo: a sunset, the sea, an interior, product packaging. The photo stays in your browser and is never sent anywhere.
Warp and grain
Warp shifts the colors along a pattern: waves, smooth noise, cells or a swirl around the center. Strength sets how much, Pattern scale sets how coarse it is, and the dice button gives another random pattern. Grain adds light film-like graininess: with it the gradient does not look plastic and does not band on screens. In Adjust all colors you can shift the hue, saturation and brightness of the whole palette at once.
Try also
Also free, no sign-up
FAQ
Didn't find an answer? Message us and we'll help.
The one set in the W and H fields, up to 4096 pixels on the longer side (a limit of the graphics card in the browser). There are ready sizes for a post, a story, an X header, a link preview and wallpaper. The screen shows a reduced copy with the same proportions.
PNG is lossless, best for design work. JPG and WebP are lighter, good for social media and websites. SVG for a linear or radial gradient without warp and grain is a real vector file you can edit in Figma; for mesh gradients and warps the SVG contains an image, because there is no vector format for such gradients.
For linear, radial and conic, yes. A mesh gradient in CSS is built from several radial spots and looks similar, but without warp and grain: browsers cannot draw those with plain CSS. If you need the exact background, use the PNG.
The photo is scaled down and all its pixels are grouped by color similarity (k-means). The group centers become the palette colors, and each color's point is placed where that color appears most in the picture. Colors that are too rare are dropped.
Yes. Click the color square to open the picker or type a HEX code in the field next to it. You can have from 2 to 12 colors. The cross removes a color, the plus adds a new one, and a double-click on the canvas places a new point right there.
Click Link to gradient: the link is copied, and it opens the same gradient with all colors, points and settings. The last gradient is also saved in your browser and opens on your next visit. Made a mistake? Undo the step with the arrow button or Ctrl+Z.
The screen shows a reduced copy while the file is rendered at full size, so grain and fine warp details are smaller in the file. The colors and point positions are the same.
Yes, without restrictions: it is your image. The photo the palette was taken from never leaves your browser, and a color palette is not protected by copyright.