15 CSS blend modes that will supercharge your images

One 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 CSS’ background-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.

  • Bronco Mustang

    This was something i suggested firefox many years ago, great to know its happening…

  • http://www.letsnurture.co.uk/ ilesh Raval

    Thanks for simple example to explain The Css effects on the Image it can clearly visible on image and i can identify it

  • Sarah

    hey, I think you forgot to include the lighthouse source file in the demo package

  • Melvin

    Nice feature but why would you actually use this? This enhances loading time of websites and has no benefits for the user. Only a web editor who is too lazy to open Photoshop could spare some seconds by using these CSS blend modes, but in my opinion the positive effects don’t make up for the negative effects. The user should load the website as quick as possible and the developer should make it that way.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      It doesn’t increase the load time, it doesn’t even increase the render time perceptibly.

      The most likely use would be scenarios in which you don’t have ready access to the images (a site using customer uploads for example), but it would also be useful if you want to maintain a consistent brand approach to images.

      Most importantly, this is a lossless process. Meaning that you can style your images one way, and then restyle them another, all from CSS—separating data and style.

      There’s also obvious benefits when combined with CSS transitions.

      • Sara Vieira

        Like Benjie said using this doesn’t really increase loading time, it doesn’t load any external resources and since the main scenario I think about using this type of blend modes is for hover effects so this means that instead of getting a normal and a hover image you only get one and make your hover effect with CSS which means one less image on your website and actually faster loading.

        In my opinion the main benefit in this approach is saving on HTTP requests and images on your website and always do things with CSS.

    • sitekickr

      It’s a valid question, and it would seem to hold true for many CSS styles, not just blend modes. But if you consider user-generated content, where there is no control over what a user might upload, this comes in handy.

      Consider even the most basic border styling applied to an image if you want to achieve consistent image borders, but don’t want to depend on users to add borders to their images.

  • http://julienjolly.com/ Julien Jolly

    Unfortunately “transition: background-blend-mode 1ms ease;” don’t work yet :-/

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      No, but you can tween the background color.

  • http://ChiefAlchemist.com/ Mark Simchock

    Cool. Two questions:

    1) Will these work on background-color? For example, could you apply a color to the background and the border of a div and then make the background lighter knowing it would easily work with the border?

    2) Is there a property to adjust / set how much a blend is applied. Again, let’s stick with lighten. Can I adjust how much it lightens, or is the amount always fixed?

    • Sara Vieira

      Hello,

      1) Do you mean to change the color by applying a blend mode to it ? If that’s what you mean unfortunately that is not possible , the idea adobe had for blend modes is to blend a color with an image, so to do that you are gonna need to wait for color functions.

      2) The amount of lighten is always fixed by the property but you can adjust how strong the color you are using on the image is. Example: http://codepen.io/SaraVieira/pen/bGmvu and you can get pretty good effects.

      Hope that helped.

  • http://makemeahappyuser.blogspot.com/ Julia

    Interesting! Do those blend modes have the same result as the Photoshop filters with the same names?

    • Sara Vieira

      Yes they have the same result, they blend the colors in the same way

  • Sergei Mosin

    This + ye old CSS 3 gradients = really really cool stuff with no extra load times. However old devices might have a hard time with a effect rich website. There’s only so much a 128 MB GPU can handle

  • GoodBytes

    Not working on iPad. Nice article, though.

  • Lurk Sidewalker

    This is awesome, but it’s still a little early for any wide spread use without hacks or workarounds. I will definitely keep it in my back pocket though.

  • Hadrian Embalsado

    Still not available in Maxthon 4.4 and yeah IE11.