Make a Gradient from an Image
Turn the colors of a photo into a gradient.
Drop an image here
or choose files from your device
You can also paste an image with Ctrl+V
JPG, PNG, WebP, AVIF, HEIC, GIF · up to 100 MB
Your images are processed locally in your browser and are not uploaded.
Add a photo and its main colors become the stops of a gradient, ordered from dark to light. Choose how many colors to use, switch between linear, radial and conic, change the angle or any color, then copy the CSS or download the gradient as a PNG wallpaper. Perfect for backgrounds that match a picture, a brand or a mood.
How to make a gradient from an image
- Step 1
Add a photo.
- Step 2
Choose the number of colors and the gradient type.
- Step 3
Copy the CSS or download the image.
Why use PhotoTools
Colors that match
Taken from the photo itself.
Fully editable
Type, angle and every color stop.
Private
The photo is read on your device.
Supported formats
Input
- JPG
- PNG
- WebP
- AVIF
- HEIC
- GIF
- BMP
- TIFF
- PSD
- RAW
Output
- CSS
- PNG
Frequently asked questions
How are the colors picked?
The pixels are grouped by color and the main groups become the stops, sorted from dark to light so the gradient flows naturally.
Can I use the gradient on a website?
Yes. Copy the CSS line into your stylesheet; it works in all current browsers.
Is it free?
Yes. Browser tools on PhotoTools are free, unlimited and work without an account.
Are my images uploaded to a server?
No. This tool runs entirely in your browser using WebAssembly. Your images never leave your device, and nothing is stored.