Spotify's new brand identity using feColorMatrix SVG filters

This is a short post where I show how to use SVG and a feColorMatrix filter to apply a duotone effect to an image.

Demo & Code:

You may have seen that the is full of duotone images. My colleague Thodoris described how to achieve this effect and .

The JS version uses <canvas>, and after reading , where they also mention the duotone images used in , I forked and used feColorMatrix instead:

The code consists of a <svg/> that has an <image/> to which we apply a <filter />. The filter uses a feColorMatrix, and its values are calculated using JS, though if you already know the range of colours you want to apply there is no need to run JS, just set them in the markup. If you have any issues understanding how the matrix is calculated, check .

Alternatives

You can also CSS blend modes to achieve a duotone effect, which doesn't require any JavaScript.