Image Duotone Effect
Image
Duotone replaces an image's tonal range with a gradient between two colors — shadows become the dark color, highlights become the bright color, midtones interpolate. The result is the iconic look you've seen on Spotify covers, indie album art, and editorial photography. This builder runs the duotone on a canvas in your browser (no upload), so it works on any image size your machine can handle. The midpoint slider shifts where the color split happens; contrast steepens or flattens the curve. The output is downloadable PNG, plus the equivalent SVG `feColorMatrix` + `feComponentTransfer` filter so you can apply the same effect via CSS `filter: url(#duotone)` without re-rasterizing.
How to use
- Drop an image. Pick a preset (Spotify green-black is the classic) or two custom hex colors.
- Slide the midpoint to control where shadows end and highlights begin. Tweak contrast for punchier or softer transitions.
- Download the PNG, or copy the SVG filter to apply the same effect via CSS on any element in your site.
Frequently asked questions
- Why does it look muddy in the middle?
- Default contrast at 0 is a linear ramp between the two colors. Raising contrast steepens the transition — useful when your image has a lot of mid-grays that turn into muddy mixed colors. Lowering it gives softer, more painterly gradients. The midpoint slider shifts where the split happens for unevenly-exposed photos.
- How does the SVG filter version work?
- It uses `feColorMatrix` to convert the image to grayscale (using BT.709 luminance coefficients), then `feComponentTransfer` with a `table` function to remap each channel to a 2-point gradient between your shadow and highlight RGB values. The result: same effect as the canvas version, but without rasterizing — and animatable via CSS transitions on the SVG filter.
Related tools
Image Crop (Aspect Ratio)
Crop any image to a standard aspect ratio (1:1, 16:9, 4:3, etc.) — centered automatically.
Image Rotate & Flip
Rotate an image 90° at a time or flip it horizontally / vertically, then download the result.
Image Resize
Resize an image to any dimensions and export as PNG, JPEG, or WebP — all in your browser.
Image to Base64
Convert an image to a Base64 data URL you can paste anywhere.
QR Code Generator
Create custom QR codes from any text or URL and download them.
Image Compressor
Compress and resize JPEG, PNG, and WebP images in your browser.