How many colours does it use?

Five, found by clustering the image's pixels into five groups and taking each group's average. Both the count and the 90 degree direction are fixed.

Is the result the same every time?

Yes. The clustering is seeded deterministically, so the same image produces the same five colours on every upload and after every reload.

Why is the gradient not light to dark?

Because the stops follow cluster order rather than brightness. If you want a tonal progression, sort the five hex values by lightness and reorder the stops in the declaration.

Can I use this for a whole photograph?

The tool produces a five-colour abstraction of the image, not a reproduction. It works well as a background treatment derived from a photograph rather than as a replacement for it.

What happens to the transparent parts of an image?

They are skipped when the image is sampled, so a cut-out logo or a PNG with a clear background contributes no colour to the five stops — only the visible areas vote.

Gradient from Image

Drop an image here, or click to upload

PNG, JPG, WebP, GIF

You Might Also Need

Transparent Gradient Generator

Fade any color to transparent

Brand Color Extractor

Pull brand colors out of a logo or screenshot

The gradient from image tool clusters an uploaded photograph into five dominant colors and lays them out as a horizontal five-stop gradient, returning the CSS ready to paste.

What is Gradient from Image?

The gradient from image tool is one upload and one result. Drop a picture onto the dropzone and the page reads its colours, then draws a horizontal gradient from them and prints the CSS declaration beneath with a copy button. A Replace image button resets the state. There are no settings — the number of colours and the direction are both fixed.

The colours come from clustering rather than sampling. The image is shrunk to a small working size and its pixels are grouped into five clusters by similarity, each cluster represented by its average colour. That is a more interesting answer than picking five pixels at random, because clustering finds the colours that actually account for large areas of the image rather than the ones that happen to sit under a particular coordinate. A photograph of a coastline comes back with sky, sea and sand rather than with five near-identical shades of blue.

The five resulting colours then become the stops of a linear gradient running left to right, spaced evenly at zero, twenty-five, fifty, seventy-five and a hundred percent. Even spacing is deliberate: it makes the output predictable and easy to read, and it keeps the attention on the colours themselves. If a particular colour needs more of the ramp, the declaration is plain CSS and the percentages can be rewritten by hand afterwards.

One property of the output is worth anticipating. The stops are ordered by cluster index, not by lightness, so the resulting gradient is not necessarily a ramp from dark to light — it may go from a mid blue to a dark green to a pale sand and back. That is a faithful representation of the photograph, and a poor match for situations where you want a tonal progression. If the goal is a scale, sort the five hexes by lightness before using them.

On determinism, the clustering is seeded at fixed positions rather than randomly, which means the same image produces the same five colours every time. Uploading the same file twice will not give you two different palettes, and neither will a page reload. That is the behaviour you want from a tool whose output is destined for a stylesheet — a colour that changes between runs is a bug rather than a feature.

Where this is most useful is when an interface has to agree with an image. A hero section, a card, an email header: taking the gradient from the photograph means the treatment is guaranteed to be in the picture's palette rather than near it, and it removes the guesswork from matching. It is also a fast way to get a decorative background that has some relationship to the content, rather than a preset chosen at random — an image color gradient that came from the asset itself, so the two always agree.

Limits worth noting: five colours and ninety degrees are fixed, transparent pixels are ignored when sampling, and clustering compresses the image's subtler shades into five representatives.
There is no way to weight one region over another — the whole frame participates.
Within those bounds, to create gradient from photo without leaving the browser is one upload away, and as a way to extract gradient from picture content into a photo based gradient css declaration it removes the colour matching step entirely.

How to use Gradient from Image

Drop an image onto the upload area.
Read the resulting five-colour gradient, remembering the stops follow cluster order rather than lightness.
Copy the background declaration and paste it into your stylesheet.
Reorder or re-space the stops by hand if you want a tonal ramp instead.

When to use Gradient from Image vs related tools

Use this when a component needs to take its colours from a photograph — hero banners, image cards, email headers. Use the palette extractor when you want the image's colours as discrete swatches rather than as a gradient, or the dominant colour finder for a single value. A set of discrete swatches rather than a ramp is what the color palette extractor returns, and a single representative value is the dominant color finder's answer.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.