What it does
Colofilter.css supplies CSS treatments that give images a duotone appearance. Its demo pairs example images with classes that can be copied into a web page, and the stylesheet is available under MIT.
Download the stylesheet, add an image inside a wrapper, and apply a treatment such as blend-blue to that wrapper. The demo lets a visitor click an example image to copy its classes.
Class order matters in this stylesheet. Its selectors require the wrapper’s class attribute to begin with blend, so the treatment class must come before an unrelated class such as card. Dark and light variants change how the image and overlay blend.
The supplied rules combine image blending with positioned overlays; this is a treatment rendered by the web page. The repository also links a separate background-image example. Reuse or modification is allowed under MIT, with the copyright and permission notices retained.
Strengths
- Demo examples expose the classes needed for each treatment.
- Dark and light variants alter the image and overlay blending.
Watch out for
- The treatment class must appear first in the wrapper’s class attribute.
Best for
- Web pages applying a shared duotone treatment to image elements.
Sources
- Colofilter.css - Duotone filters made with CSS (Oct 28, 2026)
- GitHub - LukyVj/colofilter.css: Colofilter.css - Duotone filters made with CSS ! · GitHub (Oct 28, 2026)
- colofilter.css/styles/colofilter.css at master · LukyVj/colofilter.css · GitHub (Oct 28, 2026)
- colofilter.css/LICENSE at master · LukyVj/colofilter.css · GitHub (Oct 28, 2026)