How to Create a Duotone Effect with SVG Filters
Map image shadows and highlights to two brand colors using SVG color filters.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Duotone via SVG Filters
A duotone maps an image's tonal range between two colors. SVG filters do this in the browser: feColorMatrix desaturates the image, then feComponentTransfer remaps shadows and highlights to your chosen colors.
- feColorMatrix converts the image to grayscale
- feComponentTransfer maps tones to two colors
- No pre-baked image edits — done live in SVG
Applying to an Image
Define the filter in an SVG and apply it via CSS filter: url(#duotone) on an image. Swap the two colors to re-theme instantly without re-exporting assets.
- Apply with CSS filter: url(#id) on the image
- Swap colors to re-theme without new exports
- Keep an unfiltered fallback for older browsers
Frequently Asked Questions
Can SVG filters apply a duotone to a regular photo?
Yes — reference the SVG duotone filter via CSS filter: url(#id) on an img to map its tones to two colors in the browser.
Why use SVG filters instead of editing the image?
SVG filters apply live, so you can change the duotone colors with CSS variables without exporting new image files for each palette.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG