CSS 文字陰影產生器
免費線上 CSS text-shadow 產生器。多層陰影可調偏移、模糊、顏色與透明度，內建霓虹、3D、復古、光暈等預設，即時預覽並一鍵複製程式碼。
CSS 的 text-shadow 屬性是什麼？
text-shadow 用於為文字字形加入陰影效果。每個陰影由水平偏移、垂直偏移、可選的模糊半徑和顏色定義，多個陰影可以用逗號分隔寫在同一條屬性裡，組合出豐富的效果。
多層陰影是怎麼運作的？
陰影按宣告順序由下往上繪製，清單中第一個陰影顯示在最上層。本產生器支援新增、刪除、啟用和停用圖層，每層都有獨立的偏移、模糊、顏色和透明度，方便疊加霓虹、3D 等效果。
水平偏移、垂直偏移和模糊分別是什麼意思？
水平偏移讓陰影相對文字左右移動，垂直偏移上下移動，模糊半徑決定邊緣柔化程度：0 是硬邊陰影（復古、描邊風格），較大的值會把顏色暈開形成光暈。
怎麼做霓虹發光效果？
使用 Neon 預設，或把多層陰影的偏移都設為 0、使用同一個亮色並逐層增大模糊值，例如 0 0 3px、0 0 8px、0 0 20px。疊出的光暈可以模擬霓虹燈管。
text-shadow 會影響渲染效能嗎？
少量靜態陰影開銷很小，但帶大量大模糊陰影的文字重繪成本更高。把很重的陰影用在長段落或持續做 text-shadow 動畫，可能在低端裝置和手機上掉幀；建議只用於短標題、控制模糊值，或改用透明度動畫。
怎麼讓陰影半透明？
每個圖層都有不透明度滑桿，會把所選顏色轉換為 rgba 寫法，例如 rgba(0, 0, 0, 0.5)。半透明陰影能和任何背景自然融合，Paper 預設就是用它實現柔和的壓印感。
text-shadow 和 box-shadow 有什麼區別？
text-shadow 作用於文字字形，沒有擴展（spread）和內陰影（inset）參數；box-shadow 作用於元素的矩形盒子。兩者共享偏移和模糊的語法，但不能互相替代。
哪些瀏覽器支援 text-shadow？
所有現代瀏覽器都支援 text-shadow，包括 Chrome、Firefox、Safari、Edge 和 Opera，十多年前就已去掉前綴並穩定。多層陰影在各瀏覽器中表現一致。
輸入的內容會被上傳到伺服器嗎？
不會。預覽文字和所有圖層設定都保存在你的瀏覽器裡，CSS 在頁面本地產生。任何資料都不經過網路，頁面載入後離線也能使用。
如何使用CSS 文字陰影產生器
用多層疊加的方式設計 CSS 文字陰影，告別只猜一組數值。所有改動都即時反映在大字級預覽上，CSS 完全在瀏覽器本機產生。
- 在「預覽文字」輸入框填上自己的文案，用真實內容檢驗效果。
- 先試預設：霓虹、紙張、3D、復古、光暈、描邊，一鍵載入現成的多層參數。
- 用每個圖層的滑桿調整水平偏移、垂直偏移、模糊、顏色與不透明度。
- 點「新增圖層」繼續疊加陰影；取消勾選可暫時停用某層，點垃圾桶圖示刪除。
- 複製產生的 text-shadow 規則，貼進樣式表即可使用。
霓虹效果用同色三四層、模糊逐層增大最搶眼——把偏移保持為 0，讓模糊負責發光。
相關工具
- CSS 陰影產生器 免費線上 CSS box-shadow 產生器。視覺化建立精美陰影，可調整偏移、模糊、擴展、顏色和內陰影。即時預覽，即時複製程式碼。
- CSS 漸層產生器 視覺化建立精美 CSS 漸層。產生支援多色標、自訂角度和位置的線性、徑向和錐形漸層。即時複製可投入生產的 CSS 程式碼。
- 花式字體產生器 免費花式字體產生器，內建28種Unicode字體風格。一鍵產生粗體、斜體、哥德體、圓圈字等特殊文字，適用於Instagram签名、TikTok、LINE和遊戲暱稱，點擊即複製。
- 創意圓角產生器 免費線上創意圓角產生器。拖曳 8 個控制點或選擇 blob 預設，快速建立有機 CSS 形狀並複製 border-radius 程式碼。
- 顏色轉換器 免費線上顏色轉換器。即時轉換 HEX、RGB、HSL、HSV 格式，附視覺化拾色器。100% 隱私保護，瀏覽器本地運行。
- CSS 緩動函數產生器 免費線上 CSS 緩動產生器。在互動曲線上拖曳 cubic-bezier 控制點，內建 18 種預設，小球循環動畫即時對比，一鍵複製 timing function。
- CSS clip-path 裁剪產生器 免費線上 CSS clip-path 產生器。支援 polygon、circle、ellipse、inset 四種模式，頂點可拖曳，即時預覽並一鍵複製 CSS 程式碼。
- CSS格式化工具 即時格式化和美化CSS程式碼，將壓縮的CSS轉換為可讀的、縮排良好的程式碼，支援自訂選項。