Tinted Photos with CSS

For most web designers, posting an image is a one-step process: you post an image, as-is. Because a lot of designers are very, very clever, it’s becoming clear that we can do much more. Here’s an image:

How can we add some color to the photo using CSS? We typically add color to an element using background-color. Unfortunately, that won’t work here. While we can use multiple backgrounds in CSS3, we can’t use background-color that way.

Fortunately, we can use background gradients! If we code a semi-transparent gradient with only one color, it will tint our photo, like this: