Estou tentando alcançar o seguinte, mas realmente lutando. Estou simplesmente tentando obter um plano de fundo diagonal que percorra o texto e mude a cor de minha escolh

Tentei usar o modo misto de mistura css, no entanto, apenas contrasta minhas cores, em vez de ter a opção de dividir em duas cores diferente

* {
  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>