Background Blend Mode = Photoshop in your browser.

A CSS property that everyone should know about.

Not every blend mode has been translated from PhotoShop into CSS: but there are a few main ones that we can use including multiply, screen, overlay, darken,lighten, color-dodge,color-burn, hard-light,soft-light, difference and exclusion, The first three multiply, screen, overlay, are the most effective and have the largest results.

Multiply Mode

It ignores white and makes things darker. If you are old enough, think of the effect of sandwiching two 35mm slides together and trying to look through the joined result. Light moves easily through overlapped areas that are clear or bright, but dark tones reinforce each other.

As an introduction, lets make a quick HTML build up. In HTML the code would be:

It ignores black, making things lighter. Imagine two projectors splashing images onto the same screen. The combined light pattern cannot make the result darker, and lighter tones will appear washed out.