CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめ

テキストやボタン、ボーダーに美しいネオンライトのエフェクトを実装するCSSのテクニックを紹介します。

ネオンライトはCSSのtext-shadowやbox-shadowで実装されており、CSSアニメーションやJavaScriptで動きを加えるとさらに面白くなります。

各デモは「Run Pen」をクリックすると、動作します。
まずは、ネオンサインでチカチカの効果もあります。

See the Pen
Flickering Neon Sign Effect using CSS Text & Box Shadow by George W. Park (@GeorgePark)
on CodePen.

上記のデモは、テキスト編集もそのままできます。「OPEN」を「オープン」などに変更してみてください。

続いて、さまざまなネオンライトのエフェクト。

See the Pen
Neon text-shadow effect by Erik Jung (@erikjung)
on CodePen.

こちらもさまざまなネオンライト。アメリカっぽいですね。

See the Pen
Neon Signs by Thomas Trinca (@Trinca)
on CodePen.

ボーダーに適用すると、蛍光灯で囲まれた感じになります。

See the Pen
Noble Gasses / Flourescent Lights [cpc-gas] by Ryan Johnson (@CITguy)
on CodePen.

ボタンのボーダーにはアニメーションで適用し、ホバーすると背景が輝き、反射効果もあります。

See the Pen
Glowing buttons by Pranjal Bhadu (@bhadupranjal)
on CodePen.

一見、シンプルなネオンライトですが、アニメーションで輝きが動きます。

See the Pen
Simple CSS Neon Text Animation by Red Stapler (@redstapler)
on CodePen.

カラーが変化するネオンライトもきれいですね。

See the Pen
Text Effect - Mystique by Chris Johnson (@jhnsnc)
on CodePen.

背景を加えると、ネオンライトはさらに面白くなります。文字がチカチカするのもリアルです。

See the Pen
CSS animated Neon Sign by Nodws (@nodws)
on CodePen.

シンプルなアニメーションでも、ネオンライトは輝きます。

See the Pen
CSS Neon Sign by Ananya Neogi (@ananyaneogi)
on CodePen.

この404、かっこいいですね。

See the Pen
Neon Text with Flickering - All Flicker! by Geoff Graham (@geoffgraham)
on CodePen.

上記のアニメーションを変えたバージョン。雰囲気がでてます。

See the Pen
Neon Text with Pulsating Effect by Silvia O'Dwyer (@silvia-odwyer)
on CodePen.

輝きをぼんやり変化させるのもかっこいいです。

See the Pen
Neon Text Subtle Flickering by Silvia O'Dwyer (@silvia-odwyer)
on CodePen.

背景にライトをあてるのもいいですね。

See the Pen
Neon Text with Background Image by Silvia O'Dwyer (@silvia-odwyer)
on CodePen.

ボーダーにもネオンライトを適用したバージョン。

See the Pen
Neon Sign with Border by Silvia O'Dwyer (@silvia-odwyer)
on CodePen.

ここからは、JavaScriptで動きを加えたデモです。

See the Pen
NEON LOVE by al-ro (@al-ro)
on CodePen.

マウスの動きに合わせて、六角形のネオンライトが変化します。

See the Pen
neon hex by Ana Tudor (@thebabydino)
on CodePen.

こちらも同じ六角形で、ずっと見てしまいます。

See the Pen
neon hexagon-forming particles by Matei Copot (@towc)
on CodePen.

雨をネオンにした、ネオンレイン。

See the Pen
Neon Rain by Nate Wiley (@natewiley)
on CodePen.

最後は煙をネオンにした、ネオンスモーク。

See the Pen
Neon Smoke by Luke Wood (@lukehmwood)
on CodePen.