CODEWITHSUNDEEP
csstextcolorsbackgroundless
J-Cake
J-Cake

Reputation: 1618

invert text color based on background in css

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?

Upvotes: 14

Views: 41057

Answers (2)

m3t4lchu
m3t4lchu

Reputation: 414

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

Cursor with inverted colors

Upvotes: 24

benvc
benvc

Reputation: 15130

You can set the text color to transparent, and use background-clip and filter to invert and grayscale the color displayed through the transparent text.

Check out a more detailed explanation of the various effects you can achieve this way at Methods for Contrasting Text Against Backgrounds.

In your case, it sounds like you are looking for something like the following:

#one {
  background-color: blue;
}

#two {
  background-color: white;
}

span {
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: invert(1) grayscale(1);
  -webkit-filter: invert(1) grayscale(1);
}
<div id="one">
  <span>Some text</span>
</div>
<div id="two">
  <span>Some text</span>
</div>

Upvotes: 8

Related Questions