CSS mix-blend-mode not working? Set a background-color!

💡 If you find your CSS mix-blend-mode not working as expected (on a white background), you need to explicitly set a background-color on the underlying element. The easiest way to do so is to apply background-color: white; on the html and body elements.

html, body {
    background-color: #fff;
}

~

Demos + Explanation

Without a background-color set

You’ll notice here that for the “white” sections, the set mix-blend-mode: difference does not seem to work. The navigation will stay white and visually blend into the white background. Note that the navigation is not actually gone, as you can still see it shine through whenever a number of any of the sections crosses it.

See the Pen CSS mix-blend-mode not working? (1/2) by Bramus (@bramus) on CodePen.

The reason why it doesn’t work is that the white sections don’t really have a white background. They have no background-color set, so they fall back to the default value of transparent. Visually this is manifested as a white color, but to the compositor it will still be transparent. As the compositor can’t calculate the difference of the white text against the transparent background, the text will remain white.

~

With a background-color set

With background-color: #fff; set on the body/html the compositor does know how to calc the difference, and the demo will behave correctly.


See the Pen CSS mix-blend-mode not working? (2/2) by Bramus (@bramus) on CodePen.

Alternatively we could set this declaration on the sections themselves:

section {
    background-color: #fff;
}

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.