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:

<div class="rapper">
<div class="image-1"></div>
<div class="image-2"></div>
<div class="image-3"></div>
</div>

Now lets add some CSS.

.image-1 {
background-color: rebeccapurple;
}
.image-2 {
background-image: url(http://41.media.tumblr.com/ccc2511b5cf920591b1fa00ce19c6e41/tumblr_nod41bzpqj1st5lhmo4_1280.jpg);
}
.image-3 {
background-image: url(http://41.media.tumblr.com/ccc2511b5cf920591b1fa00ce19c6e41/tumblr_nod41bzpqj1st5lhmo4_1280.jpg);
background-color: rebeccapurple;
background-blend-mode: multiply;
}
.image-1, .image-2, .image-3 {
float: left;
width: 400px;
height: 400px;
background-size: cover;
}
.rapper {
width: 100%;
}

Our result looks like this!

Pretty cool stuff.

Overlay Mode

A balance between screen and multiply: it ignores mid-tones, making the blended result lighter and darker at the same time. In other words, it increases contrast.

Now lets replace our old CSS with the following CSS:

.image-1 {
background: black;
background-image: url(images/d.png);
background-size: 16px 16px;
}
.image-2 {
background-image: url(http://36.media.tumblr.com/c5d426af46a281611f286a9accef83ca/tumblr_nndj4wwY821st5lhmo1_1280.jpg);
background-size: cover;
}
.image-3 {
background-image:
url(images/d.png),
url(http://36.media.tumblr.com/c5d426af46a281611f286a9accef83ca/tumblr_nndj4wwY821st5lhmo1_1280.jpg);
background-blend-mode: overlay;
}
.image-1, .image-2, .image-3 {
float: left;
width: 400px;
height: 400px;
background-size: cover;
}
.rapper {
width: 100%;
}

Our result looks like this!

Even cooler.

Now for the cream of the crop.

Screen Mode

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.

Add some new HTML code:

<header><h1>Wisconsin Farmland</h1></header>

Then lets replace our old CSS with the following CSS:

@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:900);
header {
padding: 120px 50px 170px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/wisconsin-farmland-3.jpg);
background-size: cover;
}
header h1 {
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 140px;
color: crimson;
mix-blend-mode: overlay;
padding: 0;
margin: 0;
line-height: 0.5;
}

Our result looks like this!

These are a few simple examples of background-blend-mode. Go replace the ones we used with the others in the list and share your results!