Streaming live at 10am (PST)

Reverse Text Color Based on Background Color

The default slider in Webflow has white arrows and bullets. But what if you have an image that has a white background or lighter in color? Is there a simple way to still be able to see these UI elements no matter what background they are on?

Yes… behold… the CSS filter “invert” property.

But you might wonder, well if I put the filter as invert, that will cover light and dark backgrounds. But what about grey? Wouldn’t my nav again disappear?

Yes… behold… set the the filter to 58% (or find your sweet spot).

Ok. I know that was an easy solution. But the strange thing is—no one writes about it on the net. I’ve read tons of other complicated solutions and none seem to meet all demands across the board. Anyhow, there it is. I’ve added a link below to copy code and re-purpose. Night!

Reversing Colors Against Backgrounds

hi @Graphic_ReDesign I do not know what browser engine you using or what keywords you search for but try to search for CSS filters or mix-blend-mode. Here is a few links examples just in case you have missed these that describe all in detail.

CSS filter

Mix-blend-mode