Almost there

We're foxing your request.
Stay cool!

Something went wrong.
Please try again or contact us for support.

Got it

75 organic views:
23 members, 52 guests

Tint image in HTML using Image Opacity & Solid Background Color. Formula

Maxim Aginsky

Designer & Author - UX - Information - Processes - Full-stack - UI - Applications/Web.

Founder of brandOn - Montreal design and development studio & Cssfox - Web designers' community.

Maxim Aginsky

Some time ago I decided to update one of my old (2013) posts - Three ways to tint image with CSS, which is quite well appearing on Google search.
While working on the update I have found an interesting rule, which I have translated into formula.

To tint image with CSS, usually we will apply a semitransparent layer on top of it using box-shadow, multiple backgrounds or pseudo elements CSS techniques.

Now! If we will do opposite - first solid background color and then, on top of it semitransparent image, the result going to be the same.

The rule

Image + Color with 0.4 opacity = Color + Image with 0.6 opacity

The formula

x + zy = y + (1 - z)x

CSS, HTML code example

Tint image using Image Opacity


<div class="wrap">
<img src="image.png">


.wrap {
position: relative;
display: inline-block;
background: rgb(204, 0, 255);
.wrap img {
display: block;
width: 100%;
opacity: 0.6;

Thank you for your interest.