Magical CSS, let the text intelligently adapt to the background color

In recent days, several students have asked the same question.

There is a piece of text on the page, can this text be displayed in different colors under different background colors? Also known as smart discoloration. Like this:

Text appears white on a black background and black on a white background. It seems to be a complicated effect, but it is actually very easy to implement in CSS. Today, I will introduce such a little trick. In CSS, use the blending mode mix-blend-mode: difference to intelligently adapt the text to the background color.

mix-blend-mode: difference

CSS3 has added a very interesting property -- mix-blend-mode , where the Chinese free translations of mix and blend are both mixed, so the literal translation of this property is the mixed-blend mode. Of course, we usually call it a mix-mode . There are some blending modes as shown below:

Among them, the protagonist of this article is mix-blend-mode: difference , which means difference mode. This blend mode looks at the color information in each channel, compares the base color to the drawing color, and subtracts the pixel value of the darker pixel from the pixel value of the lighter pixel.

Mixing with white inverts the base color; mixing with black does not change.

, the bright area of the upper layer will invert the color of the lower layer, and the dark area will display the color .

The most common application scenario of this blending mode is the scenario described at the beginning of the article, which enables text to display different colors under different background colors.

Most suitable for black and white scenes, a very simple demo:

<div></div>

div {
    height: 100vh;
    background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);

    &::before {
        content: "LOREM IPSUM";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        mix-blend-mode: difference;
        animation: move 3s infinite linear alternate;
    }
}
@keyframes move {
    0% {
        transform: translate(-30%, -50%);
    }
    100% {
        transform: translate(-70%, -50%);
    }
}

The effect is as follows:

CodePen Demo -- linear-gradient + Mix-blend-mode

Of course, it doesn't have to be black or white. Take a look at the following example. There is such a scenario. Sometimes we are not sure about the final performance value of the background color (may be the background configuration, passed to the front end), but we need to let the text It can be displayed normally in any background color, in this case, you can also try mix-blend-mode: difference .

<ul class="flex-box">
  <div class="box">
    <p>开通会员查看我的VIP等级</p>
  </div>
   // ..... 
</ul>

div {
    // 不确定的背景色
}
p {
    color: #fff;
    mix-blend-mode: difference;
}

No matter what the background color is, the mix-blend-mode: difference element with <p> set can display the text normally:

CodePen Demo -- mix-blend-mode:difference to achieve text color adaptive background color

Disadvantages of mix-blend-mode:difference

Of course, this method is not perfect, because the color after mix-blend-mode:difference is superimposed with the background color, although it can be displayed normally, it is not necessarily the most suitable color and the best color for the display effect.

When actually used here, in non-black and white scenes, more experiments are needed to make trade-offs.

finally

To sum up, this article introduces a small technique for using CSS blend mode to achieve text-adaptive background display. If you are interested in blend mode, I recommend you to read my following articles:

• Incredible mix-blend-mode
• incredible blend mode background-blend-mode
• Two lines of CSS code to achieve arbitrary color assignment technology for pictures
• Skillfully Use CSS to Build Gradient Color QR Code
• CSS magic trick | Magical use of blending mode to achieve text hollow wave
• Explore the CSS 3D failure problem caused by CSS blending modes\filters
• CSS Art -- Use background to create all kinds of wonderful backgrounds

Well, this is the end of this article, I hope it helps you :)

If you want to get the most interesting CSS information, don't miss my official account -- iCSS front-end anecdotes 😄

More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.