CSSのmix-blend-modeプロパティは、要素の内容と背景のブレンドモードを指定するためのものです。これを利用して、背景色と文字の色を独特な方法で反転させることができます。

HTML要素にクラスを適用

以下のようにHTML要素にクラスを適用します。

<div class="basic-style">
    これは基本のスタイルです。<br>
    <span class="inverse-blend">
      この部分だけmix-blend-modeで反転させています。
    </span>
</div>

基本のスタイル設定

まず、基本となるスタイルを設定します。
以下の例では、白と黒の背景にグレー文字のスタイルを設定しています。

.basic-style {
    background: linear-gradient(90deg, #fff 0%, #fff 50%, #000 50%, #000 100%);
    color: #ccc;
    width: 600px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 900;
}

mix-blend-modeを使用した反転スタイル

次に、mix-blend-modeを利用して、背景と文字の色を反転させるスタイルを設定します。differenceは、要素の色と背景色の差異を利用してブレンドします。したがって、白背景に対して黒文字を適用すると、文字部分は白く表示されます。

.inverse-blend {
    mix-blend-mode: difference;
}

See the Pen Untitled by 近藤一 (@togiydrd-the-bold) on CodePen.

この方法を使用すると、mix-blend-modeの効果により、背景色に対する文字の色が動的に変化します。たとえば、背景色が青の場合、青に対する反転色が文字として表示されます。

注意点として、mix-blend-modeは全てのブラウザでサポートされているわけではないため、対応ブラウザを確認してから利用することをおすすめします。
https://caniuse.com/