Monotone an Image with CSS

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.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.