黒い文字の奥から、鮮やかな光が漏れ出す。 サイバー感やナイトライフの雰囲気を演出する「ネオン＆グロウ」エフェクトは、サイトの印象を一気にスタイリッシュに引き上げます。
この記事では、文字自体は黒（ダーク）に保ちつつ、光の反射や輪郭の明滅でネオン感を表現するCSSアニメーションを5つ紹介します。画像は一切不要で、SWELLにコピペするだけで実装可能。ユーザーの視線を釘付けにする、光と影の演出を取り入れてみませんか？
Neon Pulse Glow（ネオン・パルス）
黒文字の背後から、鮮やかなネオンピンクの光がゆっくりと呼吸するように明滅します。待機中も静かに光を放ち、ホバーすると文字が白く発光し、ネオンの光が最大出力で周囲を照らします。
See the Pen Neon Pulse Glow by BaseKENT (@basekent) on CodePen.
調整方法
- 光の色 (
#ff00de): ピンク色を指定しています。シアン（#00ffff）やライムグリーン（#39ff14）に変更すると印象がガラリと変わります。 - 背景色: 白背景のサイトでも機能しますが、ネオンを美しく見せるために要素自体に暗い背景色（
background: #000;）を敷いています。
Flicker Sign（フリッカー・サイン）
接触不良のネオン管のように、黒文字の背後の光が「チカチカ」とランダムに点滅します。少し退廃的（サイバーパンク）な雰囲気を演出でき、ホバーすると完全に通電して安定した光を放ちます。
See the Pen Flicker Sign by BaseKENT (@basekent) on CodePen.
調整方法
- 点滅の頻度:
@keyframes flickerGlow内のパーセンテージ（%）を追加・変更することで、チカチカするタイミングを自由に調整できます。 - 光の強さ:
rgba(0, 229, 255, 0.5)の透明度（0.5）を上げると、通常時の光がより強くなります。
Glow Outline（グロウ・アウトライン）
文字の中身は真っ黒のまま、輪郭線（アウトライン）だけがネオンのように発光し続けます。待機中は輪郭の太さが微細に揺らぎ、ホバーすると輪郭線が消え、文字自体が光を帯びて浮かび上がります。
See the Pen Glow Outline by BaseKENT (@basekent) on CodePen.
調整方法
- 輪郭の太さ:
-webkit-text-stroke: 1pxの数値を2pxにすると、より太く力強いネオン管になります。 - 色:
#39ff14をサイトのテーマカラーに合わせて変更してください。
Backlight Glow（バックライト・グロウ）
文字は完全なシルエット（黒）となり、その後ろから強烈なバックライトが漏れているような演出です。待機中は背後の光が左右に揺らめき、ホバーすると光が四方に広がって神々しい雰囲気を生み出します。
See the Pen Backlight Glow by BaseKENT (@basekent) on CodePen.
調整方法
- 光の揺らめき幅 (
10px,-10px):@keyframes内のX軸・Y軸の数値を変更すると、光の動き方が変わります。 - シルエットの強調: 背景が白いサイトの場合は、このエフェクトの背後に暗めの角丸背景などを敷くとより効果的です。
Cyber Scan Neon（サイバー・スキャン・ネオン）
黒文字の上を、青いレーザーのような光の筋が上下にスキャンし続けます。SF映画のインターフェースのようなクールな表現で、ホバーするとスキャンが止まり、文字全体がサイバーブルーに発光します。
See the Pen Cyber Scan Neon by BaseKENT (@basekent) on CodePen.
調整方法
- レーザーの移動距離 (
3rem):@keyframes scanMoveのtranslateYの値は、.neon-scanのfont-sizeと同じか少し大きいくらいに設定すると綺麗に端から端まで動きます。 - レーザーの太さ:
height: 3px;の数値を大きくすると、より太い光のバーになります。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
