Quick + Easy Colour Overlay

No need to position divs on top of one another anymore to achieve a colour overlay on top of an image. I stumbled across this CSS that does it for you. Check out these quick and easy steps!

1. Create a Div

Assign it a class of tinted-image.


2. Add a Background Image

Assign it a linear gradient.


3. Adjust the Linear Gradient

Play with the values to get the desired color gradient and transparency. If you’re looking for a single colour transparency, just use the same hex and transparency values for both (as shown above).

This saved me time and the headache of positioning. I hope it does the same for you!

Posted on: May 13, 2014 8:37 pm