Lograr texto de dos colores con CSS

Consulta inicial:

¿Cómo se puede lograr el efecto del texto con diferentes ¿colores en cada lado sin duplicar contenido?

Enfoque convencional:

Un método común implica crear dos separe los elementos de texto y colóquelos uno al lado del otro, cada uno con sus colores de fondo y primer plano únicos.

Solución alternativa:

Para minimizar la duplicación de contenido, considere aprovechar CSS propiedades como clip de fondo: texto. Esta propiedad le permite aplicar un degradado al texto mismo, permitiendo lo siguiente:

Implementación de 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;
}

Estructura HTML:

Explicación:
Se aplica un degradado al elemento #principal, que abarca el texto .
El elemento 
 tiene un degradado invertido aplicado a su fondo, que se establece como el color de fondo del texto.
El La propiedad background-clip:text restringe el degradado de fondo al área de texto.
-webkit-text-fill-color: transparent garantiza que el texto sea transparente, permitiendo que se muestre el degradado de fondo.
Esta técnica crea un efecto de texto de dos colores sin necesidad de contenido duplicado. Al utilizar efectos de fusión, logra una transición perfecta entre colores sin necesidad de elementos de texto adicionales.