Obtendo texto de duas cores com CSS

Consulta inicial:

Como você pode obter o efeito de texto com diferentes cores em cada lado sem duplicar o conteúdo?

Abordagem convencional:

Um método comum envolve a criação de duas cores separadas elementos de texto e posicioná-los lado a lado, cada um com suas cores exclusivas de fundo e primeiro plano.

Solução alternativa:

Para minimizar a duplicação de conteúdo, considere aproveitar as propriedades CSS como clipe de fundo: texto. Esta propriedade permite aplicar um gradiente ao próprio texto, possibilitando o seguinte:

Implementação CSS:

#main {
  background: linear-gradient(to right, red 50%, #fff 50%);
}

#main > p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Estrutura HTML:

Explicação:
Um gradiente é aplicado ao elemento #main, que abrange o texto .
O elemento 
 tem um gradiente invertido aplicado ao seu fundo, que é definido como a cor de fundo do texto.
O A propriedade background-clip:text restringe o gradiente de fundo à área de texto.
-webkit-text-fill-color: transparente garante que o texto seja transparente, permitindo que o gradiente de fundo seja exibido.
Esta técnica cria um efeito de texto de duas cores sem exigir conteúdo duplicado. Ao usar efeitos de mistura, consegue-se uma transição perfeita entre cores sem a necessidade de elementos de texto adicionais.