CODEWITHSUNDEEP
htmlcssmix-blend-mode
Nano
Nano

Reputation: 1398

CSS Colored Background Blend over Text

I've tried for several days to blend a colored background over a text with the same color and end up with the blended text to get white. Here is an example of what i managed to archive with only black and white:

Current Behaviour

But as soon as i change the color of the text and background from black to - for example - blue, the text does not get white but yellow or another color instead.

I used the CSS mix-blend-mode exclusion.

A working example with black and white can currently be found here. My goal is to replace the black and white primary button with a blue and white one.

Upvotes: 0

Views: 1271

Answers (1)

A Haworth
A Haworth

Reputation: 36512

If we consider the mix-blend-mode difference, this takes the difference between the background and the content colors.

So, if we have our text as blue which is rgb(0, 0, 255) to get to white we need to difference it with rgb(255, 255, 0).

Conversely, if our text is rgb(255, 255, 0) and we difference it with white which is rgb(255, 255, 255) we get rgb(0, 0, 255) which is blue.

So, we give the text a color of rgb(255, 255, 0) and ask it to blend with the background which is white and that will give us blue. Then as we overlay a blue we will get white text.

Here's the snippet. I haven't provided the wavyness which would be the subject of a different question.

UPDATE: as can be seen from the comments, the results so far on Windows10 and IOS look OK, but on MACOS variable results have been seen with the text taking on some pale color in Chrome and Safari, though being white on Firefox. Differences in interpretation (especially between mix-blend-mode and background-blend-mode) need further investigation.

body  {
  position: relative;
  background-color: rgb(255, 255, 255);
  width: 100vw;
  height: 100vh;
}

@keyframes updown {
  0% {
    height: 0;
    top: 200px;
  }
  50% {
    height: 200px;
    top: 0;
  }
  100% {
    height: 0;
    top: 200px;
  }
}
  
.background {
  position: absolute;
  background-color: rgb(0, 0, 255);
  width: 400px;
  height: 200px;
  animation: updown 10s ease infinite;
}

.text {
  position: absolute;
  font-family: sans-serif;
  width: 400px;
  color: rgb(255,255,0);/* complement of blue */
  mix-blend-mode: difference;
  text-align: center;
  font-size: 50px;
}
<div class="background"></div>
  <div class="text">Primary button</div>

Upvotes: 3

Related Questions