⚡すべてのツール 💻開発者ツール 📝テキストツール 🎨デザインツール 🖼️画像・メディア 🔢計算ツール 🔒セキュリティ 📄PDFツール 📐単位変換

CSS ネオンテキスト＆発光文字生成器

多層text-shadow、ネオン色、輝き半径、呼吸点滅アニメーションを設定し、CSSコードをコピーします。

⚙️ ネオン設定

🎨 プリセット

📝 表示テキスト

📏 フォントサイズ 48px

💡 発光半径 10px

🌈 発光カラー

🔤 フォントスタイル

✨ 点滅アニメーション有効化

⏱️ 点滅速度 (秒) 1.5s

ネオンプレビュー

Cyberpunk Neon

📄 生成されたCSS

/* CSS Code will be generated here */

使い方

1 CSS ネオンテキスト＆発光文字生成器を開き、処理する内容を入力、貼り付け、または選択します。
2 目的に合わせてオプションと出力形式を調整します。
3 結果を確認し、必要に応じてコピーまたはダウンロードします。

主な利用シーン

多層text-shadow、ネオン色、輝き半径、呼吸点滅アニメーションを設定し、CSSコードをコピーします。日常業務、開発、学習、簡易確認に利用できます。

プライバシーとデータ処理

このツールはブラウザで動作します。機密データを扱う前に、端末とブラウザの安全性を確認してください。

CSS ネオン文字ジェネレーター：text-shadow の発光と点滅アニメーション

このツールは CSS の text-shadow を使って、ネオンサインのように光る文字を作ります。左側で表示テキストを入力し、フォントサイズ（20〜100px）、発光半径（2〜30px）、発光カラー、フォントスタイル（Monospace・Sans-serif・Serif・Cursive）を調整すると、右側のプレビューに即時反映され、下に CSS が生成されます。初期設定のピンクでは .neon-text { color: #ffffff; font-family: sans-serif; font-size: 48px; text-shadow: 0 0 4px #fff, 0 0 10px #ff007f, 0 0 20px #ff007f; } に点滅アニメーションが加わった CSS が出力されます。

仕組みは 3 層の text-shadow です。1 層目は 4px の白い光で、ネオン管の最も明るい芯を表現します。2 層目は選んだ色で「発光半径」をぼかし量に使い、3 層目は同じ色でぼかしを 2 倍にして外側へ広がる光を作ります。文字色は白に固定されています。実際のネオン管も中心はほぼ白く見え、色は周囲の光から感じられるためです。半径を大きくすると光は柔らかく広がりますが、小さな文字ではにじみやすいので、文字が小さいほど半径も小さくするのがコツです。

「点滅アニメーション有効化」をオンにすると、CSS に @keyframes neon-pulse が追加されます。中間地点で光の広がりを半分に、不透明度を 0.85 に下げ、alternate と ease-in-out で往復再生するため、ネオンがゆっくり呼吸しているように見えます。点滅速度は 0.5〜4 秒で、数値が小さいほど速く点滅します。プリセットはサイバーピンク、オーロラグリーン、ディープブルー（点滅なし）、サンセットオレンジの 4 種類で、色・半径・サイズ・アニメーションを一度に設定できます。

ネオン文字は黒や紺などの暗い背景で最も映えます。白い背景では光がほとんど見えません。速すぎる点滅は見る人に負担をかけることがあるため、ゆっくりめに設定し、prefers-reduced-motion メディアクエリでアニメーションを止められるようにしておくと安心です。text-shadow は純粋な CSS なので画像も JavaScript も不要で、主要ブラウザすべてで動作します。コピーされるクラス名は .neon-text なので、必要に応じて名前を変えて見出しやボタンに適用してください。