Colofilter.css

Those colorful filters uses css blend modes and were heavily inspired by Spotify new 2015 ads

This technic is called "DuoTone", and today, with the power of CSS we can play around with some blend-modes properties, to get some cool visual results.

close spotify examples

To use those filters, download the colofilter.css file, add it to the head of your document :

<link href="path/to/colofilter.css" rel="stylesheet" type="text/css">

Then to use the filters, use the proper classes on your elements, and that's it!

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

Examples (click the images to copy the classes):

lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem

Unfortunately, it will not work with IE & Edge browsers, as well as Opera Mini, and Safari (desktop & IOS ) is not supporting the hue, saturation, color, and luminosity blend modes.

See compatibility for : mixblendmode  filters

A polyfill is on it's way!