CSS 陰影產生器是一個視覺化編輯器，將位移、模糊、擴散、顏色、透明度與內嵌等滑桿位置，轉換成單一符合標準格式的 box-shadow 宣告，讓你可以直接貼進任何樣式表。CSS 陰影產生器一次產生一個有界定的陰影圖層，依照 CSS Backgrounds and Borders 規範所定義的確定順序序列化該圖層，並在本機的範例卡片上呈現效果，讓你在複製前能直接讀到完整字串。每個數值輸入都會依固定範圍進行驗證 —— 位移介於 ±200 px，模糊介於 0–200 px，擴散介於 ±100 px，透明度介於 0–100% —— 而顏色在通道被轉換為十進位 rgba 數值前，會先以六位數十六進位格式解析。由於預覽與序列化的宣告完全在瀏覽器中更新，因此任何陰影數值、顏色選擇或剪貼簿內容都不會離開這個頁面。這使得這個工具適合用來設計你真正想要的那一層，而不是用腦袋猜測數值。
陰影產生器實際會產生什麼
陰影是 CSS 中最難徒手微調的屬性之一，因為每個數值都會互相影響。4 像素的位移在零模糊時看起來銳利分明，但若模糊半徑變成位移的兩倍，就會糊成一片。負值的擴散會讓陰影緊貼方框，但最終可能完全看不見。把 rgba 顏色與三位數簡寫混用、從百分比重新計算 alpha，還要記住 inset 究竟要放在位移之前還是之後，這些小麻煩會在你每次反覆調整時不斷累積。
CSS 陰影產生器是依照 CSS Backgrounds and Borders Level 3 中描述的同一套 box-shadow 元件模型所打造，因此頁面上每個控制項都對應到規範中的真實屬性。你拉動滑桿，預覽卡片立即更新，而卡片下方的純文字宣告會精準反映瀏覽器將繪製的內容。輸出刻意保持精簡:單一屬性、單一數值，沒有選擇器、沒有樣式區塊、沒有廠商前綴，也沒有 JavaScript。你只要複製它，貼進真實元件的真實規則中，在真正重要的位置檢查結果即可。
逐項解析 box-shadow 宣告的語法單元
一個 box-shadow 數值最多有六個組成部分，而產生器在序列化時，這些部分會以嚴格的固定順序出現。選擇性的 inset 最先出現，接著是水平位移、垂直位移、模糊半徑、擴散半徑，最後是以 rgba() 標記的顏色。缺少任何一個像素長度，該數值就不再是有效的 box-shadow;改變它們的順序雖然仍能解析，但結果將不再符合你在預覽中看到的樣子。
下表對照產生器上的每個控制項、其在規範中對應的語法單元、工具強制執行的範圍，以及實際調整時在螢幕上產生的效果。
| 控制項 | CSS 語法單元 | 工具範圍 | 視覺效果 |
|---|---|---|---|
| 水平位移 | 第一個長度 | -200 到 200 px | 正值將陰影向右移動;負值將陰影向左移動。 |
| 垂直位移 | 第二個長度 | -200 到 200 px | 正值將陰影向下移動;負值將陰影向上移動。 |
| 模糊半徑 | 第三個長度 | 0 到 200 px | 零代表硬邊緣;較大的數值會柔化並擴大可見的過渡區域，但不會改變明確設定的擴散值。 |
| 擴散半徑 | 第四個長度 | -100 到 100 px | 正值在模糊前放大陰影形狀;負值會收縮陰影，甚至可能讓它完全消失。 |
| 顏色 | 十六進位輸入 | 六位數十六進位，如 #3366CC | 通道會在序列化前轉換為十進位的 rgba 數值。 |
| 透明度 | Alpha 通道 | 0 到 100% | 序列化為最多三位小數的十進位 alpha;0% 會讓陰影在語法上仍存在但視覺上看不見。 |
| 內嵌 | 關鍵字 | 開啟或關閉 | 在外部陰影與繪製於邊框內側的陰影之間切換。 |
顏色這一步值得特別說明，因為這個工具從來不把十六進位字串直接放進宣告中。六位數的十六進位會被拆成三組位元組配對，每組配對以十六進位數字讀取，再以十進位寫入 rgba() 中。透明度滑桿會補上 alpha 數值，而最終的 alpha 最多只會取到小數點後第三位。以 #3366CC、透明度 40% 為例:紅色通道為 0x33，十進位是 51;綠色通道為 0x66，十進位是 102;藍色通道為 0xCC，十進位是 204;而 40% 直接轉換為 alpha 0.4。因此序列化後的顏色是 rgba(51, 102, 204, 0.4)，而非 #3366CC66，也不是 hsla(...)。這個唯一的數值替換就是工具實際進行的所有數字運算;其他一切都只是你設定值的直接傳遞。
外部陰影 vs 內嵌:選擇正確的方向
當你切換 inset 選項時，同樣的六個控制項會產生不同的效果，因為內嵌陰影是繪製在邊框內側而非元素後方。正值位移不再把陰影推到方框的右下方，而是把可見的內部陰影推向左上方，因此感知到的光源方向正好翻轉。原本把外部陰影往左移的負值水平位移，現在則會把內部陰影往方框內部的右邊移動。多數讀者第一次接觸時都會覺得違反直覺，這正是為什麼即時預覽比憑記憶推論更可靠。
| 使用情境 | 陰影方向 | 典型的控制項選擇 |
|---|---|---|
| 從頁面浮起的卡片或面板 | 外部 | 小的正值位移、模糊大於位移、低透明度、零或小的正值擴散。 |
| 下沉的按鈕或內凹的輸入框 | 內嵌 | 模擬光源方向上的小位移、低透明度、適中的模糊、零或小的負值擴散。 |
| 英雄區塊上微妙的內部高光 | 內嵌 | 朝光源方向的負值位移、極低透明度、低模糊、零擴散。 |
| 懸浮於昏暗背景上的互動視窗 | 外部 | 較大的位移與模糊、稍高的透明度、正值擴散以加深佔據範圍。 |
真實的元件很少需要在同一層同時擁有這兩種效果。如果你想要一張卡片同時部分浮起又部分內凹，規範允許多個以逗號分隔的陰影，但組合與排列這些圖層刻意不在這個單層產生器的範圍內 —— 這個頁面一次只產生一個圖層，讓每個數值都明確不含混，使宣告保持可審核的狀態。
產生、檢查並複製 CSS 陰影
這個工作流程刻意設計得很短:設定數值、觀察預覽、讀取宣告、複製、在真實元件中測試。以下編號步驟對應產生器預期的使用順序。
- 在瀏覽器中開啟 CSS 陰影產生器;無需上傳檔案、帳號或網路呼叫即可顯示預覽。
- 在顯示的限制範圍內調整水平與垂直位移、模糊、擴散、顏色、透明度與內嵌選項，直到範例卡片達到你要的深度感。
- 檢查範例卡片，並直接讀取卡片下方顯示的完整產生宣告;該字串就是這個工具唯一會複製的內容。
- 將複製的 CSS 貼到樣式表中目標的選擇器內，並移除任何你想取代的舊有 box-shadow 宣告。
- 在淺色與深色主題、多種尺寸、焦點與停用狀態下測試真實元件，並使用你受眾實際使用的瀏覽器進行驗證。
如果複製的字串結尾是 rgba(0, 0, 0, 0)，代表你將透明度設為 0，陰影在語法上仍然存在 —— 這是刻意設計，不是錯誤。如果某個宣告完全沒有渲染出來，但預覽看起來正確，那麼請懷疑是否有父元素設定了 overflow: hidden、有經過變換的祖先元素，或是某個堆疊上下文在陰影抵達視口前就先將它裁剪掉了。
這個產生器刻意不做的事
了解這個工具的界線與了解它能產生什麼一樣重要。這個產生器建立的是一個有界定的陰影圖層，而不是以逗號分隔的堆疊。它只會寫入目前未加前綴的 box-shadow 屬性，絕不會輸出 -webkit-box-shadow 或 -moz-box-shadow;現代瀏覽器普遍支援未加前綴的形式，而這個工具不會執行 autoprefixer，也不會偵測瀏覽器目標。它不會產生 text-shadow、filter: drop-shadow()、Tailwind 類別、CSS 自訂屬性、設計系統的設計權杖或動畫關鍵影格。如果你需要這些，該宣告仍然是一個有效的基礎元件，但你得自行把它組裝進更大的規則中。
瀏覽器的渲染也可能因像素密度、變換、縮放、合成方式以及元素的形狀而略有差異，因此在方形範例卡片上看起來完美的宣告，套用在細長按鈕或寬幅英雄區塊上時可能會略有不同。請把預覽視為規範運算結果的精確模型，而非每個瀏覽器在每種情境下都會繪製的保證。
在真實元件中健全性檢查複製的 CSS
在範例卡片上看起來平衡的陰影，到了正式環境可能會失敗，原因與你選的數值完全無關。戲劇化的陰影會與內容競爭注意力而降低清晰度，讓元件看起來與周圍環境脫節，製造錯誤的視覺層級，或在複雜的攝影背景上表現不佳。檢查淺色與深色主題下的對比;檢查停用與焦點狀態，避免焦點框被外部陰影吸收;在適用的情況下檢查高對比設定與降低透明度的偏好。陰影應該強化結構，而非單獨承擔關鍵意義 —— 絕對不要只透過 box-shadow 數值來表達狀態、嚴重程度或必要動作。
若要獲得可靠的結果，請從適中的位移、大於位移的模糊、零或小的擴散，以及低透明度開始。在與目的地相似的背景上預覽該宣告，複製 CSS，放到目標規則中，並在多種尺寸下檢查實際元素。如果你想要一份可以貼進程式碼註解中反覆使用的檢查清單，陰影產生器速查表:參數與配方涵蓋了相同的範圍，並提供現成的陰影層級起點。這個產生器不會修改專案檔案，也不會在重新載入後記住設定，因此你實際交付的就是你提交到樣式表中的那條規則。
想進一步了解，請參閱如何透過視覺化工作平台製作漂亮的 CSS 按鈕。