Setting text color to inverted background color-CodePudding

Here is my fiddle, I want to set the text color to background color but inverted.

<div>
<span>Test</span>
</div>

div {
background: linear-gradient(to right, #fff, #000);
  width: 100vh;
  height: 50vh;
}

span{
  font-size: 30vh;
}

How can I do it? I know there's a mix-blend-mode, but I don't know how to use it at here.

CodePudding user response：

You need to add text-fill-color: transparent and background-clip: text in order to make gradient work as background-image in text. In the background line, just change 'to right' by 'to left'.

div {
background: linear-gradient(to right, #fff, #000);
}

span {  
background-image: -webkit-linear-gradient(to left, #fff, #000);
background-image: linear-gradient(to left, #fff, #000);
  
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
    
-webkit-background-clip: text;
background-clip: text;    
}

<div style='width: 85vh; height: 35vh;'><span style='font-size: 30vh; font-family: Arial; font-weight: bold;'>TEST</span></div>

CodePudding user response：

div {
background: linear-gradient(to right, #fff, #000);
  width: 100vh;
  height: 50vh;
}

span{
  font-size: 30vh;
  filter: invert(1);
}

<div>
<span>Test</span>
</div>

CodePudding user response：

div {
  background: linear-gradient(to right, #fff, #000);
  width: 100vh;
  height: 50vh;
}

span {
  font-size: 30vh;
  mix-blend-mode: difference;
  filter: invert(1);
}

<div>
  <span>Test</span>
</div>