CSS Text-Shadow 產生器
新調整 CSS 文字陰影並即時預覽，可複製程式碼。
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
透過即時預覽設計CSS文字陰影
這款CSS文字陰影產生器讓您直觀地設計深度、發光和描邊效果，並複製生產就緒的CSS程式碼。直接點擊大型預覽區輸入您的文字，拖動偏移量、模糊度和透明度滑桿，選擇顏色，即時觀察text-shadow在文字上的變化。
更改字型系列、大小和粗細，設定文字顏色，在淺色、灰色、深色和棋盤格背景之間切換，精確查看陰影在不同背景下的表現——這對於霓虹文字和發光文字效果尤為重要，因為它們只在深色背景上才能正確顯示。
text-shadow語法詳解
單個CSS陰影的寫法為text-shadow: offset-x offset-y blur-radius color。offset-x和offset-y控制陰影的水平和垂直位移（負值向上或向左投射），blur-radius柔化邊緣（0保持銳利），顏色決定色調——通常用半透明黑色表現細膩深度，用鮮亮顏色製造發光效果。
經典易讀的陰影為text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)。將兩個偏移量都設為0並增大模糊度，可獲得文字周圍柔和光暈。搭配亮色（如#00eaff）和遞增的模糊值，即可製造霓虹發光效果。
疊加多層陰影：霓虹、3D、描邊和長陰影
text-shadow的真正威力在於疊加。您可以在一條宣告中用逗號分隔多個文字陰影，瀏覽器依序渲染每一層。疊加多個相同亮色、模糊度遞增的陰影可創建霓虹/發光文字效果；沿右下方向逐步加深偏移顏色可構建3D立體文字；在十層以上重複同一扁平偏移形成長陰影；在字形周圍放置四到八個硬質陰影則產生描邊文字。
使用預設庫——柔和、霓虹、發光、3D、長陰影、描邊、復古、火焰和Letterpress——作為起點，一鍵載入完整陰影組合。
複製CSS、Tailwind或React Native程式碼
按專案需求匯出。複製CSS獲取標準text-shadow宣告；複製Tailwind產生任意屬性類別如[text-shadow:2px_2px_4px_#00000066]，與Tailwind v4原生text-shadow-*工具類別相容；複製React Native將第一層轉換為textShadowColor、textShadowOffset和textShadowRadius。
關於瀏覽器相容性的好消息：text-shadow已完全標準化，所有現代瀏覽器均無需-webkit-或-moz-前綴。
與CSSmatic、css.generator.cool等工具的比較
大多數線上CSS文字陰影工具只支援單層陰影。CSSmatic的文字陰影區域提供一組滑桿——適合基礎陰影，但無法疊加多層實現霓虹或3D效果，必須手動撰寫額外宣告。
UtiloKit集多層疊加、九個一鍵載入完整陰影組合的預設、可編輯即時預覽、三種格式（CSS、Tailwind、React Native）一鍵複製以及可分享連結於一體——無需註冊，不上傳檔案。
text-shadow與box-shadow的區別
這是常見混淆點：text-shadow跟隨字形（字母）的輪廓，而box-shadow跟隨元素的矩形盒子。text-shadow沒有擴展半徑，也沒有inset關鍵字——因此文字陰影不能像box-shadow那樣內嵌。在標題、Logo和標籤上使用text-shadow，在卡片和按鈕上使用box-shadow。
若要在文字上製造內嵌或壓印效果，技巧是在深色文字正下方放置淺色陰影（參見Letterpress預設）。對於較粗的文字輪廓，-webkit-text-stroke屬性比疊加八個方向陰影更簡潔。
易讀陰影技巧——以及隱私保護
陰影是視覺點綴，不是對比度的替代。對於照片上的文字，單個低透明度陰影如0 1px 3px rgba(0, 0, 0, 0.5)可在不影響視覺的情況下提升可讀性。將厚重的霓虹和3D效果留給大型展示標題，並始終驗證文字對比度是否符合WCAG標準。
無需安裝，無需建立帳號。每次預覽和產生的CSS都在您的瀏覽器本地執行，輸入的文字永遠不會離開您的裝置。
Frequently asked questions
如何套用文字陰影？
在任意文字元素上添加CSS屬性text-shadow。簡寫形式為text-shadow: offset-x offset-y blur-radius color——例如text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)，陰影向右2px、向下2px，模糊度4px。在本工具中，在即時預覽區輸入文字、拖動滑桿，點擊複製CSS即可。
CSS中的text-shadow是什麼？
text-shadow是CSS屬性，在元素文字後面繪製一個或多個陰影。每個陰影接受最多四個值：水平偏移(X)、垂直偏移(Y)、可選模糊半徑和顏色——寫為text-shadow: 1px 1px 2px #000000。
如何在CSS中添加陰影？
對於文字，在元素規則中使用text-shadow，如h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }。對於盒子、卡片和按鈕，使用box-shadow。
如何在設計工具中為文字添加陰影？
在Figma、Sketch或Photoshop等設計工具中，為文字圖層添加投影效果，設定X/Y偏移、模糊度和顏色。這四個值幾乎一一對應CSS：Figma中X 2、Y 2、模糊4、黑色40%對應text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)。
如何創建發光或霓虹文字效果？
霓虹發光是將多個相同亮色陰影以零偏移和遞增模糊度疊加而成。例如：text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #0066ff; 白色文字配深色背景。點擊這裡載入霓虹預設立即獲得。
如何創建3D文字或長陰影效果？
兩種效果都使用多個有偏移但無模糊的陰影。3D立體文字：疊加向右下方遞進、顏色逐漸加深的層次。3D和長陰影預設自動構建這些層次。
如何用text-shadow創建描邊文字？
在文字周圍四個（或八個）方向放置模糊度為0的硬質陰影。例如：text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111; 為白色文字添加細黑描邊。
如何創建多個文字陰影？
在單條text-shadow宣告中用逗號分隔：text-shadow: 1px 1px 2px #000, 0 0 8px #0ff;。瀏覽器按順序繪製，第一個陰影在最上層。霓虹、3D、火焰和描邊效果都是這樣構建的。
text-shadow可以是inset（內陰影）嗎？
不能。與box-shadow不同，text-shadow屬性沒有inset關鍵字，也沒有擴展半徑。要在淺色背景上模擬壓刻效果，可在深灰色文字正下方添加微妙淺色陰影，如text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);。Letterpress預設展示了這一技巧。
如何在Tailwind CSS中設定文字陰影？
Tailwind CSS v4包含原生文字陰影工具類別（text-shadow-sm、text-shadow-md、text-shadow-lg）。自訂值使用任意屬性，空格變為底線：class="[text-shadow:2px_2px_4px_#00000066]"。
text-shadow需要-webkit-或-moz-前綴嗎？
不需要。text-shadow已完全標準化，所有現代瀏覽器均支援無前綴寫法，直接寫text-shadow: 1px 1px 2px #000;即可。
text-shadow和box-shadow有什麼區別？
text-shadow從字形（字母本身）形狀投射陰影，box-shadow從元素的矩形盒子投射陰影。text-shadow沒有擴展半徑和inset選項；box-shadow兩者都有。
如何添加細微陰影提升文字可讀性？
使用小偏移量和少量模糊像素的低透明度暗色陰影，例如text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);。這能讓白色或淺色文字從照片或漸層背景中凸顯。
與CSSmatic等其他text-shadow工具相比如何？
CSSmatic有文字陰影功能，但只支援單層——無法疊加多層實現霓虹、3D或描邊效果，必須手動編輯程式碼。UtiloKit是唯一集多層疊加、命名預設、即時預覽以及CSS/Tailwind/React Native一鍵匯出於一體的免費工具。
如何複製產生的文字陰影CSS，離線可用嗎？
點擊複製CSS獲取可直接貼上的宣告，複製Tailwind獲取任意屬性類別，複製React Native獲取textShadowColor/textShadowOffset/textShadowRadius等價程式碼。使用分享連結將精確設定儲存到URL。全部免費、無需註冊、本地執行，載入後離線也可使用。
