使用方式
- 1 開啟CSS 霓虹與發光文字產生器，輸入、貼上或選擇要處理的內容。
- 2 依需求調整頁面上的選項與格式。
- 3 確認即時結果，再複製或下載可用的輸出。
CSS 霓虹與發光文字產生器
即時調校多層 text-shadow 陰影、顏色、發光半徑與呼吸閃爍動畫，快速預覽並複製 CSS。
⚙️ 發光樣式設定
48px
10px
✨ 啟動呼吸閃爍動畫
1.5s
即時霓虹預覽
Cyberpunk Neon
📄 產生的 CSS
/* CSS Code will be generated here */
適合的使用情境
即時調校多層 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; } 再加上一段閃爍動畫。
霓虹效果的原理是疊三層 text-shadow：第一層是 4px 的白色光，模擬燈管中心最亮的部分；第二層用你選的顏色、以「發光半徑」為模糊值；第三層同色但模糊值加倍，形成向外擴散的光暈。文字本身固定為白色，因為真實霓虹燈管的核心看起來接近白色，顏色主要來自外圍光暈。發光半徑越大，光暈越柔、越遠，但在小字上太大會糊成一團，建議字越小半徑越小。
開啟「呼吸閃爍動畫」後，CSS 會多出 @keyframes neon-pulse：在動畫中段把光暈縮小到一半、透明度降到 0.85，再用 alternate 與 ease-in-out 來回播放，看起來像燈管輕微呼吸。速度可在 0.5 到 4 秒之間調整，數字越小閃得越快。內建四種主題：賽博龐克（桃紅）、北極光（綠）、深海之藍（藍，預設不閃爍）與落日金黃（橙），點一下就會同時套用顏色、半徑、字級與動畫設定。
實際使用時，霓虹字放在深色背景上效果最好，淺色背景上光暈幾乎看不見。閃爍動畫不宜太快，頻繁閃動會讓部分使用者不適，建議搭配 prefers-reduced-motion 媒體查詢在需要時關閉動畫。text-shadow 屬於純 CSS，不需要圖片或 JavaScript，所有瀏覽器都支援；複製的類別名稱是 .neon-text，可以自行改名後套用到標題或按鈕上。
常見問題
霓虹文字的 CSS 原理是什麼？
核心是多層 text-shadow：一層白色小模糊當作燈管中心，再加兩層同色、模糊值不同的陰影當作光暈。本工具輸出的格式是 0 0 4px #fff, 0 0 半徑 顏色, 0 0 兩倍半徑 顏色，文字本身設為白色。
為什麼放在白色背景上看不到發光？
光暈是半透明的彩色模糊，在淺色背景上對比太低，幾乎看不出來。霓虹效果建議搭配黑色、深藍等深色背景，必要時也可以把文字本身改成發光色。
閃爍動畫會影響效能或無障礙嗎？
text-shadow 動畫需要瀏覽器反覆重繪，一兩個標題沒問題，大量文字同時閃爍則可能在低階裝置上變慢。快速閃爍也可能讓對光敏感的使用者不適，建議放慢速度，並用 prefers-reduced-motion 讓使用者可以關閉動畫。
可以使用自訂字型嗎？
工具內只提供四種通用字型類別。若要用 Google Fonts 等自訂字型，複製 CSS 後把 font-family 改成你的字型名稱即可，text-shadow 與動畫設定不受影響。圓潤或細線條的字型通常更有霓虹燈管的感覺。
