CSS で文字にぼかし効果を追加する方法

CSS で文字にぼかし効果を追加する方法を紹介します。
表示の演出で、文字がボケた状態から表示されるような演出をしたい時に便利な方法です。

CSS で文字にぼかし効果を追加する方法

CSSで文字にぼかし効果を追加するには color と text-shadow を使用します。
例えば、文字に透明度50%ほどで20pxほどのぼかしを加える場合、次のコードをCSSに追加します。

実際の見た目はこちら。

文字にぼかし効果を追加

CSS はこちら。

.blur {
color: transparent;
text-shadow: 0 0 20px rgba(0,0,0,0.5);
}

まずは colortransparent を指定して透明にします。
次に、text-shadow でボケの値を調整することで影をぼかし(ブラー)のように表現します。
手前に表示されるテキストカラーが透明になっていることで、ぼかしを加えた表現になります。

CSS でボケて消えるアニメーションの実装方法

紹介したぼかし効果はアニメーションに流用することができます。
例えば、文字がボケながら消える。またはその逆のアニメーションを実装するには、次のコードをCSSに追加します。

実際の見た目はこちら。

文字にぼかし効果を追加

CSS はこちら。

.blur-anime {
color: transparent;
animation: blur-anime 10s linear infinite;
}
@keyframes blur-anime {
0% {text-shadow: 0 0 20px rgba(0,0,0,0);}
33% {text-shadow: 0 0 0 rgba(0,0,0,1);}
66% {text-shadow: 0 0 0 rgba(0,0,0,1);}
100% {text-shadow: 0 0 20px rgba(0,0,0,0);}
}

サンプルコードでは、消えた状態から表示、そしてまた消えるを繰り返すようになっているので、利用する際はコードの調整を行ってください。

実際に利用する時は、animation ではなく、hover の適用後、適用前などで text-shadow を指定すると使い勝手が良いかと思います。
ぼかしをなくす場合は text-shadow のボケの値を 0 に指定、透明度を100%にすることで、 color の値が透明でも、文字色をつけることができます。

CSS で文字にぼかし効果を追加する方法のまとめ

主なポイントは「テキストカラーを透明」「テキストシャドウでぼかしを表現」になります。古いブラウザーではボカシの表現に差が出る場合がありますのでご注意ください。
CSS で文字にぼかし効果を追加する方法を紹介しました。