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:

We display this with the following CSS:

background: url(https://straightstreetdesign.com/images/fish-tint.jpg) no-repeat 0 0;

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:

background: linear-gradient(rgba(236, 254, 79, 0.3), rgba(236, 254, 79, 0.3)), url(http://straightstreetdesign.com/images/fish-tint.jpg) no-repeat 0 0;