How to invert text color according to what's behind it? (not only background)

All the solutions I have found only work inverting the color of the text element, according to the color of the background. I want the color of the text to be inverted according to whatever is placed behind it (images, videos, 3D models etc.).

I have some sticky elements in my page, I want their color to change dynamically as the user is scrolling to the inverted color of whatever is displayed behind the text at that moment.


>Solution :

I thought mix-blend-mode: difference; would do just that. ✌️

#bg {
#test {
  mix-blend-mode: difference;
<div id="bg">
<div id="test">testing</div>

Leave a Reply