Streaming live at 10am (PST)

Invert color of fixed object


Is there a way to automaticaly invert a fixed object color when scrolling onto a diffrent color background.
lets say the fixed object is white and the background in the first sector is black. however the background in the second sector is also white which makes the fixed object invisible. is there a way for the fixed object to turn black while on the second sector?


Hi Yofiel,

You mean like this:


Yes, something like that, did that with a scroll interaction?
And what if its a long bar and half of it is on the black and half on the white. Is there a way to change only the half that is on the white while its on it to black?


Ok, here is Read-Only link (page Invert color of fixed object):

Write, if you do not understand something :v:️:blush:


mm… its not exacly what I mean.
here’s an example but its made in CSS - I dont know how to code CSS (Yet…) so is there a way to apply that effect in webflow? or a way to embed it somehow as copy paste code into an HTML embed.


There used «mix-blend-mode:». You may do this effect with custom HTML embed code.

This is a variant of mixing colors, which is not suitable if you want to specify specific values. For example, that on a blue background the element was red, and on green blue. More info here:

Examples are also available from the links above.


My site will be mostly black white and grey, I wont need anything spacific.
In order for an object to do the blend I need to place him inside an html embed and give the html embed a code like that:
Did I got that right?


What is the default color of the element that will change color?


The default of the fixed object will be white and the first section black


Try like that: mix-blend-mode: difference;


Yes! exacly that.
how can I make it affect something that isnt just a circle. for example a menu or a divblock?
I want the entire navmenu to be inverted.

here’s the site:

the circle with the + sign on the top left is the nav menu I want to invert


I added the code to the Head Code in the settings and changed the class name to my own class name and it worked!
thank you bro!


The Webflow link is not working.
Can you please post the link again or the custom code which you’ve added to the head tag?

Thank you!