Monotone an Image with CSS

Avatar of Chris Coyier
Chris Coyier on

You can always apply a filter to an element to make it monotone in the grayscale sense:

See the Pen Monotone-ing an Image by Chris Coyier (@chriscoyier) on CodePen.

If you put that in a container with a background color and lower the opacity, you can get a colored monotone kind of effect:

See the Pen Monotone-ing an Image by Chris Coyier (@chriscoyier) on CodePen.

Maarten van der Velde wrote in to say that rather than lowering the opacity, we can combine it with mix-blend-mode and blowing out the contrast:

See the Pen Monotone-ing an Image by Chris Coyier (@chriscoyier) on CodePen.

Amelia Bellamy-Royds also covered using SVG color filters to do this, which has an amazing amount of control:

See the Pen SVG Filters Gray -> Invert Monochrome Color by Amelia Bellamy-Royds (@AmeliaBR) on CodePen.