フリッカー・ネオン（点滅ネオン）のCSSジェネレーター
不規則な点滅を繰り返す、リアリティのあるネオンサイン文字のエフェクトを生成します。多重シャドウによる発光と透明度の変化で、レトロな雰囲気を演出します。
プレビュー
<div class="flicker-neon">{{neon_text}}</div>.flicker-neon {
color: #fff;
font-size: 60px;
font-weight: bold;
text-align: center;
padding: 20px;
display: inline-block;
/* 多重シャドウによる発光表現 */
text-shadow:
0 0 7px #fff,
0 0 calc({{glow_size}}px / 2) {{neon_color}},
0 0 {{glow_size}}px {{neon_color}},
0 0 calc({{glow_size}}px * 2) {{neon_color}},
0 0 calc({{glow_size}}px * 4) {{neon_color}};
animation: flicker {{duration}}s infinite alternate;
}
/* 不規則な点滅（接触不良）の演出 */
@keyframes flicker {
0%, 18%, 22%, 25%, 53%, 57%, 100% {
text-shadow:
0 0 4px #fff,
0 0 calc({{glow_size}}px / 2) {{neon_color}},
0 0 {{glow_size}}px {{neon_color}},
0 0 calc({{glow_size}}px * 2) {{neon_color}},
0 0 calc({{glow_size}}px * 4) {{neon_color}};
opacity: 1;
}
20%, 24%, 55% {
text-shadow: none;
opacity: 0.3;
}
}機能、使い方
- 不規則な点滅（フリッカー）を繰り返すネオンサイン文字を生成します。
- 複数の
text-shadowを重ねることで、中心部の鋭い白光と、周辺へ広がる柔らかな拡散光のコントラストを表現しています。 - 特定のキーフレームで
text-shadow: noneと低いopacityを適用し、電圧が不安定なような「チカチカ」とした動きを実現しています。 - レトロさやサイバーパンクな雰囲気を演出したい箇所の見出しに適しています。
CSSプロパティの説明
text-shadowをコンマ区切りで複数指定することで、光の重なりをシミュレートしています。
@keyframes内で特定のパーセンテージにのみ異なるスタイルを割り当て、一定ではない「不規則な」点滅を作り出しています。
opacityを変更することで、消灯時でもわずかに文字の輪郭が見える、リアリティのある表現を行っています。
