Imitate Photoshop blend effects like multiply, overlay etc

16
votes

I'm making a website with a full page background image. I want to create a background image for a side column that acts like a Photoshop layer with multiply as blend mode. It's just a blue colored surface with the 'behaviour' of a Photoshop multiply layer.

It's not possible to merge the overlay and the image since the background can change when the website is opened in another screen ratio/size.

enter image description here

There are a lot of solutions on SO, but they only work with multiplying 2 images with a fixed position, not a colored surface with variable position/background.

Are there tricks to achieve this?

4
cssoverlayphotoshopblend
Why don't you use css rgba(0, 65, 131, .8) to set the background color of your side column? – Shivam
That will just create a transparant blue background, but I want to have the multiply effect as in Photoshop. (2 layers: 1. Image, 2. Solid blue with blending mode 'Multiply') – Pieter
Ahh, I see. Interesting question :) +1 – Shivam
is using a html5 canvas an option for you, or do you require backwards compatibility with older browsers? – bizzehdee
try using this post to do blending stackoverflow.com/questions/3648312/… and use the equations from en.wikipedia.org/wiki/Blend_modes#Multiply to get your blending equation. – bizzehdee

4 Answers

9
votes

jsBin demo

Use the CSS3 property mix-blend-mode MDN Docs
(For fallback use an rgba or hsla color with a bit of alpha transparency.)

Assign a desired blend-* class to your element like:

/* ::: BLEND MODE CLASSES */

.blend-normal{ mix-blend-mode: normal; }
.blend-multiply{ mix-blend-mode: multiply; }
.blend-screen{ mix-blend-mode: screen; }
.blend-overlay{ mix-blend-mode: overlay; }
.blend-darken{ mix-blend-mode: darken; }
.blend-lighten{ mix-blend-mode: lighten; }
.blend-colordodge{ mix-blend-mode: color-dodge; }
.blend-colorburn{ mix-blend-mode: color-burn; }
.blend-hardlight{ mix-blend-mode: hard-light; }
.blend-softlight{ mix-blend-mode: soft-light; }
.blend-difference{ mix-blend-mode: difference; }
.blend-exclusion{ mix-blend-mode: exclusion; }
.blend-hue{ mix-blend-mode: hue; }
.blend-saturation{ mix-blend-mode: saturation; }
.blend-color{ mix-blend-mode: color; }
.blend-luminosity{ mix-blend-mode: luminosity; }


/* ::: SET HERE YOUR INITIAL COLORS */
div{  
  background: rgba(0, 80, 200, 0.8);
  color:      #fff;
}
div span{
  color:#000;
}


/* ::: FOR DEMO ONLY */
html, body{margin:0; height:100%;font:100%/1 sans-serif;}
body{background: url(http://i.stack.imgur.com/cBy6q.jpg)fixed 50%/cover;}
div{font-size:2.2em; padding:20px; margin:15px;}
div:first-of-type{margin-top:150px;}
div:last-of-type{margin-bottom:150px;}
<div class="">(rgba) <span>(rgba)</span></div>
<div class="blend-normal">normal <span>normal</span></div>
<div class="blend-multiply">multiply <span>multiply</span></div>
<div class="blend-screen">screen <span>screen</span></div>
<div class="blend-overlay">overlay <span>overlay</span></div>
<div class="blend-darken">darken <span>darken</span></div>
<div class="blend-lighten">lighten <span>lighten</span></div>
<div class="blend-colordodge">color-dodge <span>color-dodge</span></div>
<div class="blend-colorburn">color-burn <span>color-burn</span></div>
<div class="blend-hardlight">hard-light <span>hard-light</span></div>
<div class="blend-softlight">soft-light <span>soft-light</span></div>
<div class="blend-difference">difference <span>difference</span></div>
<div class="blend-exclusion">exclusion <span>exclusion</span></div>
<div class="blend-hue">hue <span>hue</span></div>
<div class="blend-saturation">saturation <span>saturation</span></div>
<div class="blend-color">color <span>color</span></div>
<div class="blend-luminosity">luminosity <span>luminosity</span></div>

CSS blend mode like Photoshop multiply overlay burn dodge

4
votes

Simple with a bit of SVG:

<svg width="200" height="200" viewBox="10 10 280 280">
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
    <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>

and some CSS:

#kitten:hover {
    filter:url(#multiply);
}

The fiddle: http://jsfiddle.net/7uCQQ/

1
votes

As FC said you can use CSS3 custom filters or SVG/Canvas.

But if you need a cross-browser solution for blending layers you have to use JS method. For example, JS image processing script from Pixastic: http://www.pixastic.com/lib/docs/actions/blend/

In addition it has a lot of other visual effects like blur, noise, crop, mosaic etc.

I used this script before for several projects, it works realy great :)

Hope it helps you)

0
votes

I'm a designer and had the same problem, looking for solutions before putting the psd over to the dev team - you can try this js and/or http://css-tricks.com/basics-css-blend-modes/

Jsfiddle code:

#kitten:hover {
    filter:url(#multiply);
}

<svg width="200" height="200" viewBox="10 10 280 280">
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
    <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>

Hope it works for you or others here. :)