0

As far as I understand, CSS' mix-blend-mode is supposed to behave the same way as Photoshop' Blend mode. However, in the following simple example I am getting different results and I am not sure why.

Example

A cyan rectangle (#00ffff) half overlapping a red rectangle (#ff0000). The blend mode of the cyan rectangle is set to "darken". Because "darken" picks the darkest of each channel (RGB) for the overlapping pixels, and all three channels are 0 in at least one of the two rectangles, I would expect the overlapping area to be black.

Result in Photoshop

(cyan rectangle outlined for clarity)

  • The cyan rectangle is not visible on the black background (expected)
  • The overlapping area is also black (expected)

enter image description here

Result on web (Latest Chrome, 70.0.3538.102)

  • The cyan rectangle is visible on the black background (not expected)
  • The overlapping area is dark (#2d0c1b), but not black (not expected)

enter image description here

Live example: CodePen

So... why is the result not the same? What am I missing?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Walmink
  • 167
  • 9

1 Answers1

0

The result is the same but the black background is applied to the body and not the to parent of the element where you applied the mix-blend-mode.

Moving the black background there will fix the issue:

body {
  background: black;
}
.group {
 background:#000;
}
.a, .b {
  width: 200px;
  height: 100px;
}

.a {
  background: #00ffff;
}

.b {
  background: #ff0000;
  margin-top: -50px;
  mix-blend-mode: darken;
}
<div class="group">
  <div class="a"></div>
  <div class="b"></div>
</div>

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.ref

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks for your answer! That explains why the non-overlapping part of the cyan rectangle was shown in my CodePen example. However, it still doesn't explain why the overlapping area appears as #2D0C1B instead of pure black (#000)? – Walmink Nov 19 '18 at 12:26
  • @Walmink in my case it's pure black, it's probably related to some settings of your screen? – Temani Afif Nov 19 '18 at 12:54
  • 1
    I tried in Firefox and got black as well. Then I played with the colour calibration on my MacBookPro and noticed that the "sRGB" and "Color LCD-1" also produced the right blending effect in Safari and Chrome. Looks like those two were respecting a colour profile I had set up in the past. Thank for helping to find the root cause! – Walmink Nov 19 '18 at 13:12
  • P.S. Maybe add the colour profile hint to your answer for future reference? Thank you :) – Walmink Nov 19 '18 at 13:14
  • @Walmink I upvoted your comment so it's a part of the answer and people will check it;) – Temani Afif Nov 19 '18 at 13:14