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.
Another way to do this, which requires only applying CSS to a single element, is to chain filter effects together:
.monochrome { filter: sepia(1) saturate(250%) hue-rotate(90deg); }
That will result in a monochrome green image. Alter saturate and hue-rotate as you desire.
Excellent. An elegant solution that was super easy to implement. Thank you for posting.