CSS Filter Duotone Generator
Create duotone-style CSS filter chains for image experiments.
Duotone image effects with filters
Duotone — mapping an image to two colors — is a striking, on-brand way to treat photos, and you can approximate it with a chain of CSS filters, no image editor required. This generator builds that filter chain for experimenting with duotone-style looks.
Filter-based duotone is quick and non-destructive, so you can preview treatments before committing to edited assets. Tune the chain and copy the CSS onto an image. For true two-color mapping, pair it with blend modes or SVG.
Copy-ready duotone
A chain of grayscale, sepia, and hue-rotate filters approximates a two-color treatment with no image editing. The filter string is built in your browser.
Frequently asked questions
How does the filter chain create a duotone look?
sepia() first turns the image into warm monotone, then saturate() boosts it, hue-rotate() swings it toward your target color, and brightness() adjusts the result. Order matters; swapping them gives different colors.
Is it a true two-color duotone?
Not exactly. CSS filters tint the whole image toward one hue. A true duotone maps shadows and highlights to two chosen colors, which needs an SVG feComponentTransfer filter or image editing.
Which image does the preview use?
The URL in the input box. Paste any public image URL to test the filter on your own photo; the image loads from that URL into this page.
Related tools
Practical utilities for front-end design and implementation work.