一份 box shadow 產生器小抄，會依照瀏覽器實際解析的確切順序，把 CSS 的 box-shadow 屬性呈現給你：可選的 inset 標記、水平位移、垂直位移、模糊半徑、擴散半徑，以及一個 alpha 介於 0 到 1 之間的 rgba 顏色。把這個順序記熟之後，你就可以讀懂或手寫像 box-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.25); 這樣的宣告，不必再猜哪個數值代表什麼。CSS Box Shadow Generator 把這同樣的六個控制項，轉換成單一一個確定性的宣告，並在你拖動滑桿時，於瀏覽器本機即時更新，因此這份小抄同時也是實際運作的對照依據：一個 box-shadow 數值、剪貼簿上的純文字，沒有 style 標籤、沒有選擇器、沒有 HTML 片段、沒有廠商前綴，輸出結果也不會被硬塞進額外的陰影層。預覽畫面與序列化後的宣告，都不會離開你的機器，因此在你為實際使用 box-shadow 屬性的頁面反覆調整樣式時，可以放心讓它一直開著。
一眼看懂 box-shadow 屬性
CSS 的 box-shadow 屬性，遵循 CSS Backgrounds and Borders Level 3 規範所定義的語法，而 W3C box-shadow definition 明確說明了每個瀏覽器所使用的相同元件順序。一旦你知道這個順序，任何你讀到或寫出的宣告，都會對應到同樣的結構。CSS Box Shadow Generator 提供六個數值控制項，加上一個 inset 切換開關，每一個都有明確記錄的驗證範圍，並產生出一段純文字宣告，完全對應規範中的順序。
| 控制項 | 工具接受的範圍 | 如何序列化輸出 |
|---|---|---|
| Inset | 開啟或關閉 | 啟用時會寫在最前面 |
| 水平位移 | −200 到 200 px | 正值往右，負值往左 |
| 垂直位移 | −200 到 200 px | 正值往下，負值往上 |
| 模糊半徑 | 0 到 200 px | 讓陰影邊緣變柔和；設為零會產生銳利的邊緣 |
| 擴散半徑 | −100 到 100 px | 在模糊處理之前先擴大（正值）或縮小（負值） |
| 顏色 | 六位十六進位色碼 | 以 rgba(red, green, blue, alpha) 的形式輸出 |
| 不透明度 | 0 到 100% | 會變成 alpha 通道，最多四捨五入到小數點後三位 |
這張表格，就是這份小抄的核心內容。它記錄了這項工具在輸入端接受哪些內容，以及每個數值如何對應到輸出端的結果，讓你在還沒拖動任何滑桿之前，就能預測出最終的宣告內容。
每一個參數各自代表什麼
這一組位移數值，決定了陰影相對於方塊邊緣的位置。水平方向的正值，會讓外陰影往右移，負值則往左移。垂直方向的正值會讓它往下移，負值則往上移。對內陰影來說，同樣的位移數值，會改變視覺上感受到的方向：正值組合，看起來是從左上角往方塊內部延伸，負值組合，則是從右下角延伸。這個產生器把 inset 當成一個純粹的開關，而不是另外一組獨立的數值軸，這也是為什麼六個滑桿，就足以同時驅動外陰影與內陰影的原因。
模糊值不能是負數。設為零時，會產生一個對應方塊形狀再加上擴散值的銳利邊緣；數值越大，可見的過渡效果就會越柔和、範圍也越大，但不會改變擴散值本身。擴散是獨立的：正的擴散值，會在模糊處理之前先讓陰影變大；負的擴散值，則會讓它縮小。如果擴散值負得夠多，即使模糊值很大，外陰影也可能變得很難看見，甚至完全看不見。因為這兩個控制項是分開的，你可以稍微提高擴散值、把模糊值維持在適中的程度，來營造出一圈緊密的光暈；也可以把擴散值留在零，把模糊值拉得遠遠超過位移數值，來營造出一片瀰漫的雲霧感。
顏色控制項接受一個六位的十六進位色碼。這項工具會把它拆解成十進位的紅、綠、藍三個色版，寫進一個 rgba() 函式裡，再把不透明度滑桿附加上去，作為 alpha 分量。因此不透明度滑桿最終會被表示成一個介於 0 到 1 之間的數值，最多四捨五入到小數點後三位。alpha 為零的陰影，在語法上仍然是一個存在的宣告，但在視覺上完全看不見，這一點在同一個選擇器需要在不同狀態下表現得不一樣時，就會很重要。
inset 這個開關，會把陰影從外部的投影，切換成畫在元素邊框內側的陰影。就是這一個開關，讓同樣這六個數值控制項，能夠做出按下狀態的控制項、內凹的面板、內部的亮部，以及各種深度感，下面的配方章節會大量運用到這一點。
產生並複製一段宣告
- 打開 CSS Box Shadow Generator，看看頁面預覽區的範例卡片，這樣你就能參照目前的數值。
- 在這項工具 ±200 px 的範圍內，設定水平與垂直位移，把陰影定位到你想要相對於方塊邊緣的位置。
- 調整模糊半徑——一開始先設定一個比任何一個位移值都大的數字，讓陰影看起來柔和，而不是像被移位了一樣。
- 調整擴散半徑——先從零開始，接著往正值微調來擴大陰影範圍，或往負值微調，讓輪廓更貼近方塊本身。
- 選擇一個六位的十六進位顏色，並把不透明度設定成你想要的 alpha 通道百分比；這項工具最多會把 alpha 值四捨五入到小數點後三位。
- 如果你想要的是按下、內凹，或內部亮部這類效果，而不是外部投影，就開啟 inset，接著重新調整位移值，因為 inset 會反轉視覺上感受到的方向。
- 閱讀範例卡片下方顯示出來的宣告；其中的標記順序——可選的 inset、水平位移、垂直位移、模糊、擴散、rgba——和上面小抄的順序一致，因此你不需要離開這個頁面，就能自行核對是否正確。
- 複製這段純文字宣告，貼到擁有 box-shadow 屬性的那個選擇器的 CSS 規則中。
- 打開實際上線頁面中的真實元件，針對淺色主題、深色主題、焦點外框、停用狀態，以及至少一種符合你受眾使用情境的真實裝置或瀏覽器縮放比例，進行測試。
常見情境的入門配方
為了可靠地使用，請先從適中的位移開始，模糊值大於位移值，擴散值設為零或很小，不透明度也偏低——這樣的組合，能讓陰影強化結構感，而不是和結構互相搶戲。確切的數值，取決於元素大小與底下的表面顏色，因此請把這些內容當成方向，而不是固定不變的常數，最後的微調，交給 CSS Box Shadow Generator 來完成。
- 輕微的浮起感： 一個較小的正垂直位移、模糊值是位移值的好幾倍、alpha 值遠低於百分之五十、擴散值為零。
- 浮動的焦點元素： 水平與垂直方向使用適中且方向一致的位移值、模糊值大約是位移值的兩倍、alpha 值偏低、稍微正向的擴散值，讓接觸範圍看起來更厚實一些。
- 內凹的面板： 開啟 inset、擴散值為較小的負值，讓內側邊緣緊貼邊框、模糊值要夠大，才能讓內部亮部顯得柔和、alpha 值偏低。
- 柔和的光暈： 水平位移為零、垂直位移為較小的正值、模糊值較大、alpha 值偏低、擴散值為零——營造出的感覺，是光從上方灑落，卻沒有明顯的接觸邊界。
每一份配方，代表的是一種模式，而不是精確的數字，因為正確的數值，取決於表面顏色、元素大小與主題。把這個產生器當成一個轉盤來用：先挑一個大致符合的配方，再對照本機預覽細部微調，直到範例卡片和實際元件一致為止。
在真實元件上驗證這段宣告
一段在範例卡片上看起來沒問題的宣告，放到有複雜背景的真實元件上，觀感可能會完全不同。請以正式上線的尺寸來測試這個正式元件，包含元件仍然必須維持可讀性的最小尺寸。請分開檢查淺色與深色主題，因為低不透明度的黑色陰影，在接近黑色的背景上會消失不見，而低不透明度的白色陰影，在接近白色的背景上也會消失不見。
測試焦點外框與停用狀態，這些情境下，即使陰影不承擔傳達意義的責任，視覺層級仍然必須清楚可辨。如果你的受眾會受到高對比度或降低透明度這類偏好設定的影響，也請在那些設定下測試這個元件。瀏覽器的渲染，會因像素密度、變形、縮放、合成方式，以及元素形狀而略有差異，因此即使計算出來的 CSS 完全相同，同樣的 rgba 數值，在不同的渲染引擎上，看起來也可能有些微不同。
在最終定案之前，請複製這段宣告、貼到預定的規則中，並在多種尺寸下，對照這個元素實際會出現的背景，檢查真實元件。過於強烈的陰影，可能會降低清晰度、讓元件看起來像是脫離了畫面、製造出錯誤的層級感，或是在複雜背景上表現不佳，因此只有當這段宣告是在強化結構、而不是靠自己來承擔意義時，它才真正值得被採用。
這個產生器不會做的事
CSS Box Shadow Generator 每次只會產生一層 box-shadow。CSS 本身雖然支援用逗號分隔多個數值，來疊出多層陰影，但組合並排序多個圖層，刻意不在這個小工具的範圍內。如果你的設計一次需要不只一層陰影，請參閱 the guide on stacking multiple CSS box-shadow layers，裡面說明了逗號分隔的語法，也就是這個單層工具刻意省略的部分。
這項工具也不會加上舊式的 -webkit- 或 -moz- 前綴，不會偵測目標瀏覽器，也不會執行自動加前綴的工具。它不會產生 text-shadow、filter: drop-shadow()、多組層級深度標記、Tailwind 的類別、設計系統變數，或動畫的關鍵影格。現代瀏覽器提供的 box-shadow 屬性本來就不需要前綴，因此渲染結果的落差，很少是因為缺少前綴造成的；原因幾乎都是主題、對比度，或裝置差異。
驗證是無聲進行的：超出小抄表格範圍的輸入值，會被正規化到支援的範圍之內，而在序列化宣告之前，負零這個數值，會被寫成 0，而不是 -0。這個產生器不會修改任何專案檔案，重新整理之後也不會保留控制項的狀態，因此每一個新的操作階段，都會從相同的預設值開始。
參考連結
- W3C CSS Backgrounds and Borders Level 3 — box-shadow
- CSS Box Shadow Generator
如果你正在權衡選項，Clip Path Generator Cheat Sheet: Polygon Coordinates 這篇文章有詳細說明。