invert text color based on background in css

Question

I have a grid of different shades of blue, they each contain text, I need the text to be white if the background is dark and vice versa, I have:

color: #333;
isolation: isolate;
mix-blend-mode: difference;

but that somehow changes the background colour of the elements to some wierd orangy grey. Is there a CSS-only (less-only) option that will invert the text colour only?

Answer 1

You could also apply this styling to the element you'd like to invert the colors of:

filter: invert(1);
mix-blend-mode: difference;

It especially works if you need to base the difference on a child or a element further away, not a parent or a close element.

I used it with a custom cursor (the black circle), which made it contrast nicely with the elements behind. Sample pen here: https://codepen.io/m3t4lch7/pen/VwwOKNd