javascript - Splitting Text Color with CSS when compared to the background

Question

I'm trying to achieve the following but really struggling. I simply am trying to achieve a diagonal background which goes through the text and changes the colour my choice.

I'ved tried using css mixed-blend-mode however it just contrasts my colors rather than having the option to split into two different colors.

* {
  margin: 0;
  padding: 0
}

header {
  overflow: hidden;
  height: 100vh;
  background-color: #FFF;
  background-image: -webkit-linear-gradient(30deg, #FFF 50%, #adf175 50%);
  min-height: 500px;
}

h2 {
  color: white;
  font: 900 35vmin/35vh cookie, cursive;
  text-align: center;
  position: fixed;
  top: 0px;
  left: 20px;
  mix-blend-mode: difference;
}

h2:after {
  color: white;
  mix-blend-mode: difference;
}

<header>
  <h2>On A Mission</h2>
</header>

Answer 1

Clipping is an excellent solution.

But if you have the freedom of applying the gradient on the text of h2 , then it can be done with a little switcheroo trick.

h2 {
  background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Basically, one applies the linear-gradient background on the text element , h2 in this case, and use background-clip property to clip the background to extend to the text only . Finally use the text-fill-color to set the color of the h2 to transparent

I had just reversed the gradient colors from the question above for the h2 and the div .

More info can be seen here

• https://css-tricks.com/almanac/properties/b/background-clip/
• Difference between "-webkit-text-fill-color" and "color"?

body {
  font-size: 16px;
  font-family: Verdana, sans-serif;
}

.wrap {
  width: 50%;
  margin: 0 auto;
  border: 1px solid #ccc;
  text-align: center;
  background: linear-gradient(30deg, #FFF 50%, #adf175 50%);
}

h2 {
  background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="wrap">
  <h2>Hello World</h2>
</div>