CSS で文字をぼかす方法

CSS で文字にぼかし効果を加える方法を紹介します。
表示の演出で、文字がボケた状態からスタートさせたい時に便利な方法です。

1. CSS で文字にぼかし効果を追加する方法
2. CSS でボケて消えるアニメーションの実装方法

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

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

実際の見た目はこちら。

CSS はこちら。

.blur {

  color: transparent;

  text-shadow: 0 0 20px rgba(0,0,0,0.5);

}

まずは color に transparent を指定して文字を透明にします。
次に、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 の値が透明でも、text-shadow の指定で文字色をつけることができます。

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

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