CSS Gradient Generator

About this tool

Upload any image, a photo, a screenshot or an illustration, to get two things at once: its color palette, with HEX codes you can copy, and a CSS gradient made from those colors. Each color's share of the gradient matches how much of the photo it covers, so the gradient keeps the image's balance. Click anywhere on the image to pick the exact color of that spot, then add it to the palette if it's a color you want to keep.

Everything runs in your browser. Your image is read on your own device and never uploaded anywhere.


Moods

• Natural: the most typical color of each area of the image.
• Vivid: the most saturated colors.
• Light: light, saturated colors.
• Muted: light, desaturated colors.
• Rich: dark, saturated colors.
• Dark: dark, desaturated colors.

FAQ

How do I get the color of a specific point in an image?

Upload your image, then click anywhere on it. The exact color of that pixel appears with its HEX, RGB and HSL values, ready to copy. Use Add to palette to include it in the palette and gradient.

Is my image uploaded to a server?

No. The whole tool runs in your browser. Your image is read on your own device and never leaves it.

How are the palette colors chosen?

The image is divided into its main areas of color, like sky, sand or foliage, and one color is picked for each. The mood decides which color: Natural takes the most typical one, the others lean vivid, light, muted, rich or dark.

How is the gradient spaced?

Each color gets a share of the gradient matching how much of the image it covers, so an image that is mostly sky gives a gradient that is mostly sky.

Open the gradient generator →