CSS テキストをネオン風にする方法

CSS でテキストをネオン風にする方法を紹介します。
例えば、近未来的なサイトを作りたい時に便利な方法です。

1. テキストをネオン風にする方法
   1. 解説
2. 点滅アニメーションを追加する

テキストをネオン風にする方法

テキストをネオンぽくするには webkit-text-stroke を使用します。
実際の見た目はこんな感じになります。

ベースとなるHTMLとCSSの指定は次のようになります。

<span class="neon">日<span>日</span></span>

<span class="neon">本<span>本</span></span>

<span class="neon">語<span>語</span></span>

.neon {

  position: relative;

  display: inline-block;

  color: transparent;

  -webkit-text-stroke: 1.5px #0f0;

  text-shadow: 0 0 50px rgba(0,255,0,.5);

}

.neon span {

  position: absolute;

  top: 4%;

  left: 8%;

  opacity: .3;

}

上記はネオン表現のみの指定なので、文字サイズを変更するときは任意の値を追加してご利用ください。

解説

まずは対象のテキストを一文字ずつ span で囲みます。
テキストの縁取りには webkit-text-stroke を使用。
縁取りの強調と、次に追加する「光が滲んだ感じ」を出すために、color: transparent; を指定して塗りを透明にします。
続いて光が滲んでいる感じを出すために text-shadow でぼかしを加えます。

次に、文字に影を追加して、よりそれらしく見えるように調整します。
span で囲った中に同じ文字を追加してその文字も span で囲います。
<span>日<span>日</span></span> こんな感じ。

影は光の方向からずれて見えるので、位置をずらすために position: absolute; を追加、top と left を指定して位置をずらします。
この時の親要素には position: relative; の指定をお忘れなく。
最後に opacity でちょっと透過して完成です。

点滅アニメーションを追加する

雰囲気を出すためネオンを点滅させる場合は animation を使用します。
ベースとなるHTMLとCSSの指定は次のようになります。

<span class="neon flash">日<span>日</span></span>

<span class="neon flash">本<span>本</span></span>

<span class="neon flash">語<span>語</span></span>

.flash {

  animation: flash-anime 5s linear infinite;

}

@keyframes flash-anime {

  0%   {opacity: 1;}

  50%  {opacity: 1;}

  51%  {opacity: 0.3;}

  52%  {opacity: 1;}

  75% {opacity: 1;}

  76% {opacity: 0.6;}

  77% {opacity: 1;}

  78% {opacity: 0.3;}

  79% {opacity: 1;}

}

最初に紹介したクラスに .flash を追加します。
点滅は適宜変更を加えてご利用ください。
個人的には「パッ、パパッ」って間隔でアニメーションをつけるのが好きなので、紹介している設定はそのようにしています。
アニメーションの時間を伸ばすと（作例では5秒間のループ）、点目の瞬間が長くなるので、秒数に合わせて点滅の間隔や透明度を変更してください。

まとめ

CSS でテキストをネオン風にする方法を紹介しました。
割と簡単に実装できるので、ネオン風の画像作りが面倒臭い時に便利な方法です。
animetion 要素を追加して、光を点滅させてもよいかもしれません。