Duotone Image Generator
Turn any photo into a two-color duotone — pick shadow and highlight colors, tune contrast, and download a full-resolution PNG.
Drag & drop an image here, or click to browse
No uploads. Your files stay on your device.
Tone ramp — shadows on the left, highlights on the right
How it works
A duotone maps every pixel of a photo onto a gradient between just two colors. This tool reads the brightness (luma) of each pixel with the Canvas API, applies your contrast setting, then blends your shadow color and highlight color by that amount. Everything happens inside your browser — the image is never uploaded, and the PNG you download is rendered at the original full resolution.
Pick a preset for a quick look, or type any hex value into the two color boxes. Dark, saturated shadows with a pale highlight give the classic Spotify-style poster effect; push Contrast up for a harder, more graphic result. Keep original mixes some of the untouched photo back in for a subtler tint. Copy CSS gives you a blend-mode snippet that recreates the same effect live on a web page.
Frequently asked questions
How do I make a duotone image?
Drop a photo into the tool, pick a preset or type any two hex colors — one for the shadows, one for the highlights. Every pixel's brightness is mapped onto the gradient between those two colors, and the preview updates instantly. Use the Contrast slider for a harder, more graphic look, then click Download PNG to save the result at the original resolution.
Are my photos uploaded anywhere?
No. The image is decoded and remapped entirely in your browser with the Canvas API, so it never leaves your device. There is no account, no watermark and no server involved — the page works even if you go offline after it has loaded.
Can I get the duotone effect in CSS instead of a PNG?
Yes. Click Copy CSS and you get a snippet that recreates the same look live on a web page: the wrapper gets the highlight color as its background, the image is set to grayscale with mix-blend-mode: multiply, and an ::after overlay in the shadow color uses mix-blend-mode: lighten. Handy for hero images that need to stay swappable.