光の屈折率の分散によって起きる色収差（色ズレ）っぽいエフェクトを、CSSだけで再現してみようという小ネタです。

今回作るもの

色収差を取り入れたデザインで今一番有名なのって、多分TikTokのロゴですよね。

簡単に作れそうな割にお洒落で良き。では、この赤と青の影のような効果をCSSのみを使って文字に掛けてみましょう。

方法は簡易版と応用版の2通り紹介します。

方法1：text-shadow

まずはtext-shadowを使った簡易版です。

HTML・CSS

<div><p>TikTok</p></div>

div p{
	color: #fff;
	font-size: 100px;
	font-weight: bold;
	letter-spacing: 2px;
	text-shadow: 4px 4px #FE2C55,-4px -4px #25F4EE;
}

表示結果

See the Pen Brend_Test by Leo_8192 (@Leo_8192) on CodePen.

左上と右下に4pxずつズラした影を落としてそれっぽい効果を付けていますが、文字（白）自体が最上面にあって主張が強いので、仕上がりはちょっとイマイチ。

ただ、簡単に作れる上にこういうtext-shadowの使い方は他のテクニックに応用が効くので、覚えておいて損はないかも？

方法2：mix-blend-mode

次に紹介するのはCSSのmix-blend-modeを使ったテクニックです。こっちの方が完成度高めなのでオススメ。

HTML・CSS

<div><p data-text="TikTok">TikTok</p></div>

div p{
	position: relative;
	color: #25F4EE;
	font-size: 100px;
	font-weight: bold;
	letter-spacing: 2px;
}
div p::before{
	content: attr(data-text);
	position: absolute;
	top: 4px;
	left: 4px;
	color: #FE2C55;
	letter-spacing: 2px;
	mix-blend-mode: screen;
}

表示結果

See the Pen Brend_Test by Leo_8192 (@Leo_8192) on CodePen.

これだよこれ。赤と青の重なった部分だけが白くなっていて、text-shadowを使った手法と比べると表示結果がかなりいい感じになりました。

HTMLもCSSも少しだけコード量が増えてしまいましたが、まぁ許容範囲だと思います。

CSSの解説

疑似要素の中には「TikTok」という文字をセットしたいので、p要素にdata-text="TikTok"という属性をセットしてそれを取得しています。

もちろんcontent:"TikTok";に置き換えてもOKです。

mix-blend-modeは、CSSだけでレイヤーの重なり方を指定できるプロパティです。Photoshop等を使っている人には「描画モード」と言ったほうが分かりやすいかも？ちなみに今回は重なり部分を白くしたいので、screen（スクリーン）color-dodge（覆い焼き）を指定しています。

後はposition:absolute;を使って疑似要素の位置を少しズラして配置すれば、色収差っぽい効果の完成です。

---

以上、CSSだけで作る色収差（色ズレ）風のエフェクトでした。

ちなみに「こんなめんどくさいことせずにPhotochop使って画像化にすれば一瞬じゃん」っていうコメントは受け付けていません。

今回は文字に対してエフェクトを掛けましたが、mix-blend-modeを使えば文字に限らず色々な要素に同じような効果を適用させることが出来るので、他に良い使い道を思い付いたらまた記事にします。