Gradient Map
NewA gradient map recolors a photo by its brightness: the shadows take the colors at one end of a gradient and the highlights take the other. Apply one online here, with presets or your own colors, free and in your browser.
Drop a photo here
or paste with Ctrl+V. Photos with strong light and shade map best.
Runs entirely in your browser. Your images are never uploaded to a server.
How it works
- Drop in a photo. A Sunset gradient is applied straight away.
- Try the presets, or edit the gradient bar: drag a color to move it, click the bar to add one.
- Select a color stop to change its color, or type a hex code.
- Adjust Balance to lean toward the shadow or highlight colors, and Strength to let some original color through.
- Download at full resolution, or copy the gradient as CSS to use the same colors on a website.
Common use cases
- A bold, graphic color treatment for a poster, a cover or a social post.
- A thermal camera or heat map look for a photo, a meme or a thumbnail.
- Making a set of photos match a brand's colors so they sit together on a page.
- Trying a gradient map on a photo before building the same look in Photoshop or Procreate.
- A moody color grade at low strength, keeping some of the original color.
Frequently asked questions
- What is a gradient map?
- An effect that replaces every tone in an image with a color from a gradient, by brightness. The darkest parts take the color at the left end, the brightest take the right end, and everything in between is looked up along the way. The original colors are thrown away and only the light and shade is kept, which is why the result looks clean even on a busy photo. A duotone is the simplest gradient map, with just two colors.
- How do I apply a gradient map online?
- Drop your photo into this page and a gradient map is applied immediately. Pick a preset or edit the gradient bar, then download the result. It runs in your browser, so the photo is not uploaded anywhere, and there is no account or watermark.
- How do I use a gradient map in Photoshop or Procreate?
- In Photoshop, add a Gradient Map adjustment layer from the Layers panel and click the gradient to edit it; lowering the layer's opacity is the same as the Strength slider here. In Procreate, open Adjustments and choose Gradient Map, then pick or edit a gradient. Both work the way this tool does, so you can find a look here and rebuild it there, and Copy as CSS gives you the exact colors and positions.
- What is the difference between a gradient map and a duotone?
- A duotone is a gradient map with two colors. With three or more, a gradient map can do what a duotone cannot, like a sunset that runs purple to orange to yellow, or the black, purple, red, yellow and white of a thermal camera. For the classic two-color poster look, the duotone tool has pairs picked for it.
- Why does my gradient map look like a negative?
- The gradient is running from light to dark instead of dark to light, so the shadows are getting the bright colors. Press Reverse. A gradient map keeps a photo's structure when its colors run from dark on the left to light on the right; one that goes light, dark and light again turns parts of the picture inside out.
- How do I make a thermal or heat map effect?
- Choose the Thermal preset. It runs from black through purple, red and orange to pale yellow, the palette most thermal cameras use. It works best on a photo with a clear subject and a darker background, since the brightest parts of the picture read as the hottest.
- Is my photo uploaded?
- No. The gradient map is applied in your browser, so the photo never leaves your device. iPhone HEIC photos work too.