Box Shadow 生成器
在線 Box Shadow 生成器，支持實時預覽陰影參數並複製 CSS 代碼。
CSS 程式碼
box-shadow: 16px 16px 24px 0px rgba(9, 9, 11, 0.24);
使用說明
- 1 調整偏移、模糊、擴散和透明度參數
- 2 實時查看陰影預覽效果
- 3 複製生成的 CSS 代碼
相關工具
關於此工具
Box Shadow 生成器通過滑塊和顏色選擇器可視化調節陰影的水平偏移（X）、垂直偏移（Y）、模糊半徑（blur）、擴散半徑（spread）和顏色（含透明度），實時預覽效果並生成標準 CSS box-shadow 屬性代碼。
適用場景：為卡片、按鈕、彈窗組件設計層次感陰影效果、實現 Material Design 或 Neumorphism 風格的立體感、在 Figma 設計稿還原 CSS 時精確對應投影參數，以及在設計系統中定義統一的陰影規範（Elevation 層級）。
box-shadow 的 5 個參數之間相互影響，手寫代碼時很難憑直覺預判最終效果。通過可視化工具調整，前端工程師可以在幾秒內找到合適的陰影參數，大幅減少設計還原階段的溝通成本。
常見問題
box-shadow 各參數的含義分別是什麼？ +
語法為：box-shadow: X偏移 Y偏移 模糊半徑 擴散半徑 顏色 [inset]。X/Y 控制陰影偏移方向，正值分別向右/向下；模糊半徑越大陰影越柔和（0 為實心）；擴散半徑正值放大陰影，負值收縮；inset 關鍵詞將陰影改為內陰影。
如何實現多層疊加陰影？ +
box-shadow 支持多值，用逗號分隔：box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05); 疊加多層不同擴散程度的陰影可以模擬真實光影效果。Google Material Design 的各層級 Elevation 陰影就是通過 2-3 層疊加實現的。
內陰影（inset）有什麼用？ +
inset 將陰影渲染在元素內部而非外部，常用於製作凹陷效果（如按壓狀態的按鈕）、模擬凹槽輸入框邊框發光效果、以及 Neumorphism 設計風格中模擬物理曲面的光照感。內外陰影可以同時疊加使用。
為什麼設計稿中的陰影效果在代碼裡看起來不一樣？ +
Figma 和 Sketch 的投影（Drop Shadow）參數與 CSS box-shadow 含義略有差異。Figma 的 Spread（擴散）對應 CSS 第四個值；Figma 的角度需要換算為 X/Y 偏移（X = cos(angle) × distance，Y = sin(angle) × distance）；透明度需從百分比換算為 rgba 小數。
box-shadow 對性能有影響嗎？ +
box-shadow 會觸發瀏覽器繪製（Paint），對大量元素同時使用複雜陰影（尤其是多層疊加+大模糊半徑）時，滾動和動畫性能可能下降。對性能敏感的場景，建議改用 filter: drop-shadow() 或用絕對定位的偽元素模擬陰影，後兩者可利用 GPU 合成層加速。