CSS 盒子陰影產生器：即時預覽與複製程式碼

CSS 盒子陰影產生器

這個產生器透過六個控制項建立一個 CSS box-shadow 值：水平偏移、垂直偏移、模糊半徑、擴散半徑、具有獨立不透明度滑桿的陰影顏色，以及 inset(內陰影)開關。另外兩個顏色選擇器用來設定預覽方塊與背景顏色，讓陰影在淺色與深色背景下都能清楚顯示，四種預設，soft、hard、glow 與 inset，可以一鍵載入現成的組合。每次調整都會立即更新預覽下方的 box-shadow 程式碼，可以直接複製。

box-shadow 值是如何組成的

CSS 以固定順序寫出陰影：水平偏移、垂直偏移、模糊半徑、擴散半徑，接著是顏色；若要把陰影畫在方塊邊框內側而非背後，就在前面加上 inset 這個字。水平與垂直偏移會讓陰影左右或上下移動，兩者都可以設為 -50px 的負值，因此陰影可以落在方塊左側或方塊上方。模糊半徑的範圍是 0 到 100px，用來柔化陰影邊緣；擴散半徑的範圍是 -50 到 50px，可以在不改變方塊本身大小的情況下放大或縮小陰影。顏色選擇器的十六進位值會拆分成紅、綠、藍三個分量，0 到 1 之間的不透明度滑桿則成為 rgba() 中的第四個值；滑桿為 0 時陰影完全透明，為 1 時陰影與所選顏色完全一致。

計算範例

將水平偏移設為 4px、垂直偏移設為 -4px、模糊設為 12px、擴散設為 2px，陰影顏色設為 #059669，不透明度設為 0.3，得到的結果是 box-shadow: 4px -4px 12px 2px rgba(5, 150, 105, 0.3)。十六進位代碼 #059669 拆分後為紅色 5、綠色 150、藍色 105，不透明度滑桿的 0.3 不需要任何換算，直接成為 rgba() 中的第四個值。在相同的六個數值下開啟 inset，會在方塊邊框內側而非背後畫出完全相同的陰影，這種效果常用於按下的按鈕或凹陷的輸入欄位。

可直接複製的 CSS 程式碼

.card {
  box-shadow: 4px -4px 12px 2px rgba(5, 150, 105, 0.3);
}