CODEWITHSUNDEEP
htmlcssphotoshop
Kshitiz
Kshitiz

Reputation: 2940

Photoshop like color blend with CSS

I am trying to blend 2 gradients to achieve a photoshop like background blend affect. http://jsfiddle.net/fmgfsr4o/2/

I tried playing around with background-blend-mode: multiply; but I am not able to achieve the desired affect. Basically, the overlapping area in the above fiddle needs to be blended.

Is that even possible with css?

P.S. I am not too certain about the blend mode and haven't used it at all in the past!

Here is the image for the desired affect -

enter image description here

Upvotes: 0

Views: 123

Answers (1)

Emil
Emil

Reputation: 2059

What you are looking for is mix-blend-mode: Here's your code with that property set to multiply: http://jsbin.com/nodide/2/edit

The background-blend-mode only mixes the colors of your background images and any background color, while mix-blend-mode takes care of the blending of overlayed elements.

It is slightly less supported than background-blend-mode at the moment: it works in latest Firefox & Safari, and in Chrome and Opera if you enable the experimental web platform stuff.

Upvotes: 2

Related Questions