文字と背景が美しく交じり合う、魔法のようなエフェクト。 Webデザインにおいて、テキストは単なる「文字情報」ではなく、背景と相互に影響し合う「グラフィック」へと進化しています。
この記事では、CSSの mix-blend-mode（描画モード）を活用し、黒文字に対して不思議な色の変化をもたらすテキストアニメーションを5つ紹介します。 白い背景と同化して見えなくなる光や、重なった部分だけが反転するギミックなど、SWELLにコピペするだけで実装できるモダンでクールな表現を厳選しました。
Screen Spotlight（スクリーン・スポットライト）
黒いテキストの内部だけで、カラフルなスポットライトがゆらゆらと動きます。screen という描画モードの「白い背景の上では見えなくなる」という特性を活かしたクールな演出です。ホバーするとライトが文字全体を照らします。
See the Pen Screen Spotlight by BaseKENT (@basekent) on CodePen.
調整方法
- 光の色:
.blend-spotlight-lightのradial-gradient内の色を変更すると、ライトのカラーが変わります。 - 背景色について: このエフェクトは、親要素の背景が
#ffffff（純白）である必要があります。真っ白でないと、光の玉が背景にもうっすら見えてしまいます。
Difference Split（ディファレンス・スプリット）
黒いブロックが文字の後ろを行き来し、重なった部分の文字色だけが白く「反転」します。待機中は常にスキャンするように動き、ホバーでブロックが文字全体を覆い尽くします。
See the Pen Difference Split by BaseKENT (@basekent) on CodePen.
調整方法
- 文字色について: CSS上は
color: #ffffff;と書いてありますが、difference（差い）の計算により、白い背景の上では 自動的に黒文字として表示 されます。 - ブロックの色:
.blend-split-bgを赤や青に変更すると、反転した時の文字色がその補色（反対色）になります。
Screen Aurora（スクリーン・オーロラ）
黒文字の中に、美しいオーロラのようなグラデーションが流れ続けます。background-clip を使わずに描画モードで表現しているため、より複雑な背景アニメーションとの相性が抜群です。ホバーで動きが加速します。
See the Pen Screen Aurora by BaseKENT (@basekent) on CodePen.
調整方法
- グラデーションの変更:
linear-gradientの色をサイトのテーマカラーに合わせて変更してください。 - 色の濃さ:
screenモードの性質上、色が明るすぎると文字が白飛びして読みにくくなります。少し濃いめの色を指定するときれいに発色します。
Exclusion Wave（エクスクルージョン・ウェーブ）
画面を下から上へ白い波が通過し、波が通過している部分だけ「背景は黒に、文字は白に」ネガポジ反転します。水に沈むようなダイナミックな表現で、ホバーすると波が文字を完全に飲み込みます。
See the Pen Exclusion Wave by BaseKENT (@basekent) on CodePen.
調整方法
- 波の高さ:
.blend-wave-waterのtop: 80%;の数値を小さくする（例：top: 50%;）と、通常時の水位が上がります。 - 波の揺れ方:
border-radius: 40%;の数値を45%や35%に変えると、波の形やうねりの激しさが変わります。
Screen Glitch（スクリーン・グリッチ）
黒文字の周囲に、シアン（水色）とマゼンタ（赤紫）の「デジタルな残像」が微細にブレ続けます。ホバーすると残像が大きく左右に分離し、サイバーパンクな雰囲気が加速します。
See the Pen Screen Glitch by BaseKENT (@basekent) on CodePen.
調整方法
- ズレの位置合わせ: HTMLの親要素に
paddingを設定している場合、擬似要素（::before,::after）のtopとleftをそのpaddingの値と同じにすることで、文字がぴったり重なります。 - 残像の色:
colorの値を変更すれば、好きな色の組み合わせ（例えば緑と赤など）でグリッチを作れます。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
