ネオン文字ジェネレーター

文字を入れるとネオンサインのように光り、PNGとCSSも作れます

ネオン文字ジェネレーターは、文字を壁に掛けたネオンサインのように見せるツールです。文字を入れてチューブの色とフォントを選ぶと、ステージの看板がすぐに変わります。枠のチューブをオンにすると、文字を囲む四角いチューブが別の色で一緒に光ります。電源ボタンで消灯すれば、昼間に消えた看板のようにガラス管の色だけが残る姿も確認できます。

できあがった看板の持ち出し方は2つあります。PNG保存は壁ごと保存した画像、または光だけを残した透明背景の画像を作ります。コードのコピーは、Webページの見出しにそのまま貼れるCSSを渡します。CSSの光は文字サイズに合わせて大きくなるem単位の影7層で、PNGは同じ影をキャンバスに描き直すため、プレビューと同じ光になります。

こんなときに使います

• 看板の文言を決める前に: 改行、フォント、2色のチューブの組み合わせを、暗い壁の上で先に確かめます。電源を切れば、昼間に消灯した姿も見られます。
• サムネイルや動画に光るタイトルを載せるとき: 壁を透明にして1920×1080で保存すると、動画編集ソフトにそのまま重ねられる光る文字になります。
• Webページの見出しをネオン風にするとき: コードをコピーして貼るだけです。影がem単位なので、見出しのサイズを変えても光の比率は変わりません。
• 招待状・ポスター・プロフィール画像: 1080×1080の正方形に、誕生日のお祝いの言葉や店名を光らせて収めます。

作り方の手順

1. 文字: 改行して3行まで、1行24文字まで入れます。サンプル看板を押すと、文字・色・フォントがまとめて切り替わります。
2. フォント: ネオンチューブは看板向けの幾何学的なサンスセリフ、ネオン筆記体はつなげ書きのネオン風手書き文字です。この2つは英数字だけなので、日本語の文字は標準フォントで表示されます。
3. チューブの色: 8色のチューブ色から1つを押すか、虹色の丸から自分で選びます。枠のチューブは別にオンにして、違う色を付けられます。
4. 光の強さ・点滅・壁: 光の強さは1〜10、点滅はなし・ときどき・壊れた看板、壁はレンガ・コンクリート・暗闇・透明です。
5. 保存: PNGのサイズを選んでPNG保存を押すか、コードのコピーでCSSを持ち出します。リンクのコピーは、今の設定をアドレスの末尾の # に入れて、そのまま開き直せるようにします。

ネオンの光は影7層で作ります

CSSのtext-shadowは、文字の形をぼかした影として何枚でも重ねられます。CSS Text Decoration 3は、影の値をbox-shadowと同じように解釈し、最初の影が一番上に置かれると定めています。CSS Backgrounds 3は、ぼかしを半径の半分を標準偏差とするガウスぼかしに近づけて描くよう定めています。このツールは、細くて白い影2層を上に、広がっていく色の影5層を下に重ねて、中心が白く燃えて外側へ色がにじむチューブを作ります。文字そのものは、チューブ色に白を78%混ぜた明るい色で塗ります。

emは、その要素の文字サイズを1として数える単位です。そのため、同じコードを32pxの見出しに使っても120pxの見出しに使っても、光の太さは文字に比例します。影をpxで固定すると、文字を大きくしたときに光が相対的に細くなり、小さくしたときには光が文字を覆ってしまいます。

光の強さを変えると、色の光5層の半径は強さ÷5倍になり、白い芯2層は0.6 + 0.4 × (強さ÷5)倍と、変化が小さくなります。作業面の光の断面グラフは、太さ0.1emの線1本に7層を重ねたとき、線の中心から離れるほど残る光の強さを表しています。

影は文字の配置に影響しないため(CSS Text Decoration 3)、光が広がる距離の分だけ、見出しの周りに余白を別に確保する必要があります。64pxの見出しに強さ5を使うと、上下に50px強ほど光がにじみます。

PNGは同じ光をキャンバスで描き直します

HTML標準は、キャンバスの影のぼかしを、shadowBlurの値の半分をσとするガウスぼかしと定めています。CSSのぼかし半径と同じ関係なので、このツールはCSSと同じ半径(文字サイズ×emの値)で影を一番下の層から順に描き、最後に文字を塗ります。枠のチューブも、外側の影は箱の外だけ、内側の影は箱の中だけに描くので、CSSのbox-shadowと同じ形になります。 ブラウザによってはキャンバスの影のぼかしに上限があるため、ぼかしがとても大きい層は小さな画面に同じ比率でぼかしてから元の大きさに拡大し、σをそろえます。電源を切ったまま保存すると、消灯した看板が保存されます。

レンガとコンクリートの模様は、プレビューと同じ模様を文字サイズに合わせて拡大して描くので、ステージで見た構図がそのまま保存されます。透明を選ぶと、壁と周辺の陰を除いて、文字と光だけが残ります。光は半透明のため、白い背景の画像ビューアでは薄く見えますが、暗い写真や動画の上に載せると、ステージで見たとおりの光になります。

点滅と光過敏の基準

WCAG 2.2の達成基準2.3.1は、Webページが1秒間に3回を超えて点滅しないこと、または点滅が一般フラッシュ・赤フラッシュの閾値を下回ることを求めています。ここでのフラッシュは、明るさが最大相対輝度の10%以上、上がって下がる一組の変化のことです。面積の目安には、1024×768の画面で341×256ピクセルの四角形を、視野10度の近似として使います。看板が大きいとこの面積を超えることがあるため、このツールは面積に関係なく、回数の基準を守るように点滅を設計しています。

回数は、明るさ(不透明度)が0.1以上下がってから再び0.1以上上がる谷を1つと数え、繰り返しの周期をつなげたうえで、どの1秒の窓でも最も多く数えた値です。コピーしたCSSには、prefers-reduced-motionのルールも入っています。MDNは、このメディアフィーチャーを、端末で不要な動きを減らす設定がオンかどうかを調べるものと説明しており、その設定をオンにした訪問者には、看板は点滅せず点灯したままで表示されます。この作業面のプレビューと電源投入の点灯も、同じ設定なら動きません。 電源を入れたりサンプルや点滅を切り替えたりしたときは、点滅を1秒以上止めてから最初からやり直し(点灯の演出があるときは終わってから0.6秒後)、点滅中だった場合は点灯の演出を省くので、切り替えの前後でも1秒に2回を超えません。

本物のネオンサインの色

ブリタニカは、純粋なネオンガスが赤みがかったオレンジ色に光り、ほかのガスやその組み合わせでは別の色が出ると説明しています。ネオン管に水銀蒸気を入れると青白い光になります。どれもネオンサインと呼ばれますが、赤みがかったオレンジ以外の色はネオンだけでは出ないということです。下のチューブ色は画面(sRGB)で選んだ値なので、看板の制作を依頼するときは、業者の実物の色見本と見比べてください。

文字の芯の色は、光の色の赤・緑・青の値を、それぞれ白(255)の方向へ78%動かした値です。例: ホットピンクの緑45 → 45 + (255 − 45) × 0.78 = 208.8 → 209(D1)。

よくある失敗

• 影をpxで固定する: 別のサイズの見出しに付けると、光の比率が崩れます。このツールのコードはem単位なので、font-sizeを変えるだけで済みます。
• 明るい背景にそのまま載せる: 光は半透明の色なので、白い背景ではほとんど見えません。見出しの後ろを暗くするか、暗い帯の上に載せてください。
• 光が切れる: 影は文字の箱を広げないため、親要素がoverflow:hiddenだったり余白がなかったりすると、光が刃物で切ったように途切れます。上の表の広がりの距離だけ余白を取ってください。
• 日本語にネオンチューブのフォントを使う: 2つのネオンフォントはラテン文字だけなので、かな・漢字は標準フォントに置き換わります。日本語の看板は、ゴシックや明朝で見比べてください。
• 点滅を速くしすぎる: keyframesを自分で書き換えて、1秒に3回を超えて点滅させると、光過敏の基準を超えます。動きを減らすルールも消さないでください。

限界と注意

• 光の断面グラフと広がりの距離は、太さ0.1emの線1本で見積もった値です。線が太い場合や文字が詰まっている場合は、光が重なってより明るく広く見えます。
• ゴシック・明朝・等幅は、端末に入っているフォントで描くため、端末ごとに形が違い、PNGは今使っている端末のフォントで保存されます。
• 点滅の回数は、不透明度の変化で数えた見積もりです。WCAGのフラッシュ判定は、実際の画面の相対輝度と面積で行うので、大きな画面に映すときは、点滅なしで使うほうが安全です。
• 実際の看板のサイズ、チューブの長さ、価格、電力は計算しません。

基準日: 2026-10-20に、下記の標準・文書の該当する文を確認しました。表の数値はこのツールの計算と同じです。

出典

• 01W3C — CSS Backgrounds and Borders Module Level 3box-shadowのぼかし: 半径の半分を標準偏差とするガウスぼかしに近づける(ピクセルごとに5%以内)
• 02W3C — CSS Text Decoration Module Level 3, text-shadow値はbox-shadowと同じように解釈、最初の影が一番上、影は配置やスクロール領域に影響しない
• 03WHATWG — HTML Living Standard, キャンバスの影σ = shadowBlurの半分である2次元ガウスぼかし
• 04W3C — WCAG 2.2, 2.3.1 3回のフラッシュ、または閾値以下1秒間に3回を超えて点滅しない、一般フラッシュの定義(最大相対輝度の10%、0.80)、341×256ピクセルの目安
• 05MDN — prefers-reduced-motion不要な動きを減らす端末の設定がオンかどうかを調べるメディアフィーチャー
• 06Britannica — Neon lamp純粋なネオンは赤みがかったオレンジ、ほかのガスや組み合わせは別の色、水銀蒸気は青白い光
• 07Google Fonts — Tilt NeonAndy Clymer、店先の看板の文字から着想したフォント、OFL
• 08Google Fonts — NeonderthawRobert Leuschke、ネオンを模した筆記体、OFL
• 09SIL — OFL FAQ1.1 ロゴ・ポスター・看板などのデザイン作業に追加の許可なく使える

よくある質問

あわせて使うツール