Gradient from Image
Drop in a photo and turn its colours into a gradient. Pick the stops, set the angle, copy the CSS — your image never leaves your browser.
/* Add an image to get started */
—
How it picks the colours
Your image is shrunk to a small copy and every pixel is grouped by colour, using a colour space where distance matches how different two colours look to the eye. Colours that read as the same are merged, slivers under 1.5% of the image are dropped, and what is left is the palette, sorted by how much of the picture each colour covers.
The suggested gradient starts from the most prominent colourful tone, then adds the colour that contrasts best with it while still covering a real part of the image. A third stop is added only when one clearly stands apart from both.
Getting a better gradient
- Pick colours that are close in lightness for a calm background, or far apart for a bold one.
- Three stops work best when the middle colour sits between the other two, like orange between pink and yellow.
- Use the angle to follow the image: a sky usually reads best top to bottom (180°), a sunset left to right (90°).
- Turn on grain for a printed, photographic feel that matches the image it came from.
Is my image uploaded?
No. The image is read by your browser and drawn to a canvas on your device. Nothing is sent to our server, and nothing is stored after you leave the page.