CSS Box-Shadow 產生器
新製作多層 CSS box-shadow，附預設與即時預覽。可立即複製 CSS、數值或 React 樣式。
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
視覺化打造任何 CSS 陰影，告別反覆猜測
這款免費 CSS 陰影產生器讓你跳脫在程式編輯器裡盲目調整數值的苦惱，改以視覺化即時畫布操作。拖動偏移量、模糊、擴展與透明度滑桿，預覽元素上的陰影即時更新，底部立即呈現可複製的 CSS，支援多種輸出格式。所有運算都在本地瀏覽器執行，無需上傳資料、無需帳號。
你可以從八種內建預設樣式或空白圖層開始。新增多個陰影圖層堆疊出逼真的立體效果，切換深色／淺色背景確認對比，再選擇輸出格式：完整 CSS 屬性宣告、純數值，或 React 適用的駝峰式行內樣式字串。產生器涵蓋從細緻卡片浮起感到新擬物立體感，再到霓虹發光效果的所有情境。
深入理解 box-shadow 的六個參數
X 軸與 Y 軸偏移決定陰影相對於元素的位置——正 X 向右移、正 Y 向下移，負值則向左或向上，適合呈現頂部光源的陰影效果。模糊半徑控制邊緣柔化程度：零值產生硬邊清晰輪廓；較大數值則形成漸進、擴散的淡化效果，呈現自然的立體深度。擴展半徑在套用模糊前先放大或縮小陰影——以負擴展搭配大模糊，可讓陰影貼近元素自然輪廓，這正是大多數逼真卡片陰影的核心技巧。
顏色通常使用半透明深色如 `rgba(0, 0, 0, 0.12)` 表現中性浮起感，或以鮮豔色彩製作發光效果。透明度滑桿可讓你獨立調整 alpha 值，不受顏色選擇器影響。內嵌開關反轉陰影方向，使其繪製在邊框盒內側，形成凹陷槽、內縮輸入框與按鈕按下狀態——這是 `filter: drop-shadow()` 無法做到的功能。
多層陰影：打造專業、逼真的立體深度
單一大型陰影看起來人工感很重，像 Photoshop 通用投影濾鏡，而非真實光線。專業 UI 設計使用三到五層疊加的陰影圖層，每一層大致上偏移與模糊量翻倍、而透明度減半。此技巧模擬光線從光源物理散射的方式，讓陰影在任何尺寸或觀看距離下都呈現自然感。
本產生器支援最多八個獨立圖層，每個圖層都有各自的偏移、模糊、擴展、顏色、透明度與內嵌開關。每個圖層的眼睛圖示可切換顯示狀態，無需刪除圖層即可即時比較前後差異。Deep（深度）預設示範三層漸進堆疊；Floating（飄浮）以兩個互補圖層呈現元素懸浮頁面上方的感覺；Material則重現 Google Material Design 的多層高程規格。
預設樣式：卡片、銳邊、新擬物、發光等多種選擇
Soft card（柔和卡片）預設產生幾乎不可見的浮起感——剛好能讓白色卡片與頁面分離，又不會搶走內容焦點。Crisp（銳利）呈現零模糊、硬邊陰影，深受極簡主義與復古設計風格喜愛。Material重現 Google Material Design 的多層陰影規格，適合熟悉 Android 風格的深度系統應用程式。
Neumorphic（新擬物）結合左上方的亮部高光與右下方的暗部陰影，使元素看起來從相同背景表面凸出。Glow Blue（藍色發光）展示如何以零偏移、彩色陰影打造發光按鈕或英雄區塊重點——更換顏色即可配合你的品牌色彩。Inset Well（內凹槽）示範用於文字輸入框與按下狀態等凹陷 UI 元素的內嵌技巧。載入任何預設後調整滑桿，即可精確微調至設計所需。
box-shadow vs filter: drop-shadow vs Figma 陰影 — 如何選擇？
box-shadow 針對元素的矩形邊框盒套用效果。filter: drop-shadow() 則追蹤元素的 alpha 透明通道輪廓——適合透明 PNG 與 SVG 去背圖，但不支援內嵌、擴展半徑與多層堆疊。對於所有標準 UI 元件（卡片、按鈕、彈窗、面板），`box-shadow` 才是正確選擇。
Figma 與 Adobe XD 都提供陰影設計面板，但其輸出為設計工具格式，未必能直接用於 CSS 而不需手動轉換。本產生器直接輸出有效、可直接上線使用的 CSS，省去翻譯步驟。不同於 Figma 有限的免費方案或 Adobe XD 的訂閱制，UtiloKit 完全免費，可在任何瀏覽器免安裝執行，並提供多種輸出格式（CSS、數值、React），無需設計工具帳號。
效能、隱私與三種複製格式
靜態的 `box-shadow` 只繪製一次並以低成本合成——對大多數 UI 不構成效能問題。直接對其進行動畫則會在每個影格觸發重繪。效能更佳的替代方案：在 `::after` 偽元素上預先套用目標陰影，再以 `transition: opacity` 處理。GPU 合成不透明度時不需重繪陰影，實現零重繪成本的流暢動畫效果。
一旦調整好陰影效果，即可以你的專案所需格式複製：CSS 屬性用於樣式表，純數值用於 CSS 變數或 SCSS 映射，或React 行內樣式用於 JSX `style` 屬性與 Styled Components。你的設定從不儲存至伺服器或傳送至任何地方——關閉分頁即消失。收藏本頁，需要調整陰影設計時隨時回來使用。
支援桌機、iPhone、Android 及所有現代瀏覽器
此 CSS 陰影產生器完全響應式，可在任何具備現代瀏覽器的裝置上使用。在桌機上，你可獲得三欄式版面：左側為圖層堆疊、中央為即時預覽、右側為產生的程式碼。在 iPhone 與 Android 上，版面折疊為垂直排列，搭配觸控優化滑桿及呼叫原生系統顏色選擇器的色彩選取工具。
所有複製按鈕均使用 Web Clipboard API，Safari 13.1+、Chrome 66+、Firefox 90+ 及 Edge 79+ 均支援——代表複製功能在現代行動瀏覽器上無需任何變通方案即可運作。無需下載 App、無需建立帳號、無使用次數限制。在任何裝置上開啟網址即可立即開始設計。
Frequently asked questions
CSS box-shadow 是什麼？它有什麼作用？
CSS `box-shadow` 屬性可為 HTML 元素添加一個或多個陰影效果。每個陰影由最多六個值定義：可選的 `inset` 關鍵字、水平偏移、垂直偏移、模糊半徑、擴展半徑以及顏色。正的水平偏移使陰影向右移動；正的垂直偏移使陰影向下移動。多個陰影以逗號分隔，由前往後渲染。這是 CSS 中主要用於為 UI 元件添加視覺深度、高程層次、發光效果與新擬物風格的機制，完全不需要任何圖片。
CSS box-shadow 的正確語法是什麼？
完整語法為：`box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color`。只有 `offset-x`、`offset-y` 和 `color` 是必填項目；若省略，`blur-radius` 和 `spread-radius` 預設為 0，`inset` 預設為外部陰影。典型的卡片陰影看起來像這樣：`box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`。以逗號分隔可堆疊無限數量的陰影——依序由前往後渲染（第一個列出的在最上層）。本產生器輸出包含 `box-shadow:` 屬性名稱的完整宣告，若你偏好也可以只輸出數值部分。
模糊半徑與擴展半徑有什麼差異？
模糊半徑控制邊緣柔化程度：零值產生與元素形狀完全吻合的硬邊清晰輪廓；數值越大，邊緣越柔和，產生越發散的漸進淡化效果。擴展半徑在套用模糊前先放大或縮小整個陰影：正值使陰影超出元素邊界擴展，負值則向內收縮。最逼真的陰影通常使用適中的模糊搭配略微負值的擴展，讓陰影貼近元素輪廓而不會散得太遠。Deep（深度）與 Floating（飄浮）預設即採用此技巧。
如何在 CSS 中建立內嵌（inset）box-shadow？
在陰影宣告開頭加上 `inset` 關鍵字：`box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)`。內嵌陰影繪製在元素的邊框盒內側而非背後，形成凹陷或按壓效果。常見用途包括：輸入欄位（呈現焦點深度）、切換開關軌道、按鈕按下的啟動狀態，以及浮雕文字容器。本產生器在每個圖層的控制面板中都有內嵌開關——啟用後陰影立即在預覽元素中翻轉至內部。
可以在同一個元素上疊加多個 box-shadow 嗎？
可以——CSS 允許在單一元素上使用任意數量以逗號分隔的陰影。它們按列出順序渲染，第一個陰影在最上層。堆疊多個圖層是實現平滑、逼真立體感的關鍵技巧——單一大型陰影看起來人工感重，而三到五個漸進圖層能模擬光線物理散射的方式。本產生器支援最多八個獨立圖層，每個圖層都有各自的偏移、模糊、擴展、顏色、透明度與內嵌開關。眼睛圖示讓你顯示／隱藏個別圖層，方便快速比較前後差異而無需刪除圖層。
如何建立新擬物（neumorphic）陰影效果？
新擬物主義在一個背景色與頁面相符的元素上使用兩個對向陰影：一個指向左上方的亮部陰影（接近白色），以及一個指向右下方的暗部陰影（低透明度黑色）。這使元素看起來像從背景表面凸出。經典的新擬物宣告：`box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)`。元素背景必須與頁面背景完全一致，視覺魔法才能成立。本產生器的 Neumorphic 預設提供現成的起點——將預覽背景切換為「柔和灰色」即可在情境中欣賞效果。
如何製作發光的 box-shadow 效果？
使用零偏移、大模糊半徑與彩色值：`box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)`。零偏移使光暈向四面八方均勻放射。正的擴展值使光暈從元素進一步向外推散。結合兩個圖層——一個模糊較小、透明度較高的亮芯，以及一個模糊較大、透明度較低的環境光暈——可產生更有說服力的發光效果。Glow Blue 預設以兩層方式示範此技巧。更換顏色可製作任何色調的自訂重點發光效果。
如何建立平滑逼真的多層陰影？
不要使用單一大型陰影，而是堆疊三到五個圖層，每個圖層大致上偏移與模糊量翻倍、透明度減半：例如 `0px 1px 2px rgba(0,0,0,0.06), 0px 4px 8px rgba(0,0,0,0.08), 0px 12px 24px rgba(0,0,0,0.06)`。此技巧模擬光線從點光源物理散射的方式，在任何縮放比例或顯示解析度下都顯得令人信服。本產生器的 Deep（深度）與 Floating（飄浮）預設正是建立在此原則上——三個漸進圖層在任何比例下都呈現自然效果。
box-shadow 與 filter: drop-shadow() 有什麼差異？
`box-shadow` 始終追蹤元素的矩形邊框盒，無論元素視覺外觀為何。`filter: drop-shadow()` 追蹤元素實際的 alpha 透明通道輪廓——適用於透明 PNG 去背圖或 SVG 圖示，當你希望陰影跟隨形狀而非其邊界矩形時使用。對於標準 UI 元件（卡片、按鈕、面板、對話框），`box-shadow` 才是正確選擇：繪製速度更快、支援內嵌模式、可接受擴展半徑，並允許多層疊加。只有當元素的透明背景對陰影形狀有影響時，才使用 `filter: drop-shadow()`。
box-shadow 會影響 CSS 版面或點擊區域嗎？
不會。`box-shadow` 純粹是在正常版面流之外渲染的視覺效果。它從不推擠相鄰元素、從不增加可滾動內容區域，對元素的計算寬度、高度、邊距或內距也毫無影響。陰影在視覺上超出元素邊框，但版面引擎會忽略它們。這意味著你可以在緊密排列的網格中為元素添加大範圍陰影而不破壞版面——但你可能需要在父容器上加上 `overflow: visible` 以確保陰影不被裁切。
如何以 React 或 Tailwind 格式複製產生的 CSS？
完成陰影設計後，產生器提供三種輸出格式。<strong>複製 CSS</strong> 提供完整的屬性宣告（`box-shadow: …;`），可直接用於任何樣式表。<strong>複製數值</strong> 只提供陰影數值——適合作為 SCSS 變數、CSS 自訂屬性值或 Tailwind `extend.boxShadow` 項目。<strong>React 樣式</strong> 輸出駝峰式格式（`boxShadow: '…'`），用於 JSX 行內 style 物件或 Styled Components。若要用於 Tailwind，請將數值貼入 `tailwind.config.js` 的 `theme.extend.boxShadow` 下，以建立自訂陰影工具類別。
這個陰影產生器比 cssgenerator.org 或 css-box-shadow.com 更好用嗎？
大多數專用 box-shadow 工具只提供單層產生功能——例如 cssgenerator.org 提供基本控制項，但沒有預設庫也不支援多層堆疊。css-tricks.com 的參考資料是文件，而非互動工具。cssmatic.com 的 CSS 產生器雖然可用，但已過時且廣告繁多。UtiloKit 的產生器支援最多八個獨立圖層，配備每層獨立的眼睛開關、八個精心策劃的預設樣式涵蓋最常見的陰影設計模式（卡片、銳利、材料設計、新擬物、飄浮、深度、發光、內凹槽）、三種適用於不同框架的輸出格式，以及用於對比度確認的完整深色／淺色背景切換——全部免費，零資料上傳。
這個工具在手機上可以用嗎——iPhone 和 Android？
可以——此 CSS 陰影產生器完全響應式。在 iPhone 和 Android 上，所有滑桿均為觸控友好設計，配備適當大小的拖動把手。即時預覽元素會縮放以適應行動裝置螢幕。顏色選擇器在行動瀏覽器上使用原生系統顏色選擇器。三欄式桌機版面在窄螢幕上折疊為整潔的單欄垂直版面。所有複製按鈕使用 Web Clipboard API，iOS 和 Android 上的 Safari、Chrome 和 Firefox 均支援。無需下載 App，無需帳號——開啟網址即可開始使用。
