15 CSS blend modes that will supercharge your images

Default avatar.
July 03, 2014
15 CSS blend modes that will supercharge your images.

thumbnailOne of the most invaluable features of Photoshop — arguably, the feature that powered it ahead of its competition — is blend modes. Blend modes take two pixels laid on top of each other and combine them in different ways, for example the darker color blend mode will simply render the darker of the two pixels. When expanded across a whole image, blend modes can produce some stunning effects.

Although Adobe’s Photoshop didn’t invent blend modes, its implementation is certainly the most emulated. But now, you don’t need Photoshop to style your imagery in this way, because we can do it all, dynamically, with CSS3.

Browser Support

As it stands, browser support for CSSbackground-blend-mode property is improving. Earlier versions of browsers required vendor prefixes and or the activation of experimental features, but caniuse​.com reports support in the current versions of Chrome, Firefox and Opera, with Safari following soon.

There’s no sign of IE support yet, but as blend modes are a progressive enhancement we can start considering using them now.

How to use background-blend-mode

There are a number of blend mode options in the CSS3 candidate recommendations, but the most useful for our purposes is background-blend-mode. This property allows us to blend two images, or an image and a background color.

Here’s the code we need:

<div class="blend"></div>

And here’s our basic CSS:

.blend
{
 width:782px;
 height:540px;
 background:#3db6b8 url("lighthouse.jpg") no-repeat center center;
}

We’re now ready to add the blend modes.

To do this, we’re going to add another class to our div, for example multiply”:

<div class="blend multiply"></div>

And then we’ll create a second style rule:

.blend.multiply
 {
 background-blend-mode: multiply;
 }

If you’d like to take a look at the code you can download the source files here.

Multiply

Multiply, as the name suggests, multiplies the base pixel by the blend color, resulting in a darker color. Multiplying black results in black, and multiplying white leaves the image unchanged.

background-blend-mode: multiply;

Screen

Screen multiplies the inverse of the two pixel colors. Screen is the opposite of multiply and using screen on white will result in a white image and on black will leave the image unchanged.

background-blend-mode: screen; 

Overlay

Overlay is a complex blend mode. The multiplication depends on the base color: light colors get lighter, dark colors get darker.

background-blend-mode: overlay;

Darken

Darken, darkens an image. It looks at the two overlapping pixels and selects the darker of the two.

background-blend-mode: darken;

Lighten

The polar opposite of darken, lighten lightens an image by comparing the two overlapping pixels and choosing the lighter of the two.

background-blend-mode: lighten;

Color dodge

Color dodge brightens the base color to reflect the blend color by decreasing contrast.

background-blend-mode: color-dodge;

Color burn

Color burn is the polar opposite of color dodge, it darkens the base color resulting in an increase in contrast.

background-blend-mode: color-burn;

Hard light

Hard light either multiplies, or screens the colors depending on the blend color. If the blend is lighter than 50% gray the image will be lightened, otherwise it will be darkened. It’s a great way to enhance the highlights and shadows in an image.

background-blend-mode: hard-light;

Soft light

Soft light is similar to hard light, but instead of Multiplying or screening the colors, soft light uses dodge and burn for a subtler effect.

background-blend-mode: soft-light;

Difference

Difference compares the two overlapping pixels and subtracts the color with the greater brightness from the other.

background-blend-mode: difference;

Exclusion

Exclusion is similar to difference, but it produces less contrast so is a little more usable.

background-blend-mode: exclusion;

Hue

Hue takes the luminance and saturation of the base color and the hue of the blend color and merges them.

background-blend-mode: hue;

Saturation

Saturation, like hue, merges two of the values of the base color with one property of the blend color, in this case the saturation.

background-blend-mode: saturation;

Color

Color follows the same pattern as hue and saturation, this time however it’s the luminance of the base color and the hue and saturation of the blend color.

background-blend-mode: color;

Luminosity

Luminosity is the opposite of color, it combines the hue and saturation of the base color and the luminance of the blend color.

background-blend-mode: luminosity;

The image used throughout the article is lighthouse image via Shutterstock.

Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/​CSS3 and jQuery. You can follow her on twitter or check out her website.

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…