Duotone Image Filters Using CSS Blend Modes – Colofilter.css

Preview:

Description:

Colofilter.css is a pure CSS library that uses CSS blend modes to apply various types of ‘duotone’ filters to your images.

How to use it:

Download and include the Colofilter.css in the document’s head sections as follow.

<link href="colofilter.css" rel="stylesheet">

Apply ‘duotone’ filters to your images.

<div class="blend-blue">
  <img src="image.png">
  <span>lorem</span>
</div>

All CSS classes.

• blend-blue
• blend-blue-dark
• blend-blue-light
• blend-orange
• blend-orange-dark
• blend-orange-light
• blend-red
• blend-red-dark
• blend-red-light
• blend-green
• blend-green-dark
• blend-green-light
• blend-yellow
• blend-yellow-dark
• blend-yellow-light
• blend-purple
• blend-purple-dark
• blend-purple-light
• blend-pink
• blend-pink-dark
• blend-pink-light
• blend-blue-yellow
• blend-blue-yellow-dark
• blend-blue-yellow-light
• blend-pink-yellow
• blend-pink-yellow-dark
• blend-pink-yellow-light
• blend-red-blue
• blend-red-blue-dark
• blend-red-blue-light

Preview: