Upload any photo
Drag and drop or click to upload PNG, JPG, or WEBP images. All processing runs locally in your browser — nothing is uploaded to a server.
Color Tools
Image → Gradient Generator
Upload any photo and instantly get a CSS gradient built from its dominant colors. Perfect for hero backgrounds, card overlays, and design mockups that feel cohesive with your imagery.
Auto gradient from colors
Dominant colors are extracted via pixel quantization and assembled into a smooth linear or radial CSS gradient.
Copy ready-to-use CSS
Get a one-line CSS background property you can paste directly into your stylesheet, Tailwind config, or design tool.
Click or drag an image here
PNG, JPG, WEBP supported
How to generate a gradient from an image
Step 1
Upload your image
Click the upload area or drag and drop a PNG, JPG, or WEBP image onto the tool.
Step 2
Adjust gradient settings
Choose linear or radial type, pick a direction, and set how many colors to include in the gradient.
Step 3
Copy the CSS
Click 'Copy CSS' to grab the ready-to-use background property and paste it into your code.
FAQ
How does the gradient generation work?
The tool samples the image pixels using the browser Canvas API, groups similar colors through 32-bucket quantization, ranks them by frequency, and assembles them into a CSS gradient in order of dominance.
Is my image uploaded to a server?
No. All processing happens entirely in your browser. Your image is never sent to any server, making this tool completely private.
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line in a chosen direction. A radial gradient radiates outward from the center of the element.
Can I control how many colors appear in the gradient?
Yes. Use the 'Colors' slider to choose between 2 and 8 stop colors. Fewer stops produce a cleaner gradient; more stops capture more detail from the image.