CSS 陰影生成
可視化調整 box-shadow 參數，即時預覽陰影效果，一鍵複製 CSS 程式碼。
預覽
參數
水平偏移 (px)
垂直偏移 (px)
模糊 (px)
擴散 (px)
顏色
不透明度
生成 CSS
工具介紹
本工具是一款面向前端工程師的免費在線 CSS box-shadow 生成器。CSS 的 box-shadow 屬性用於為元素添加一個或多個陰影效果，每個陰影由水平偏移（offset-x）、垂直偏移（offset-y）、模糊半徑（blur）、擴散半徑（spread）和顏色組成；可選關鍵字 inset 表示內陰影。本工具支援透過滑塊和取色器可視化調整上述所有參數，在預覽框中即時查看效果，並一鍵複製生成的 CSS 程式碼（如 box-shadow: 0 8px 24px 0 rgba(0,0,0,0.15);）到樣式表或內聯樣式中使用。無需安裝，所有操作均在瀏覽器內完成。
使用說明
1. 調整參數：透過滑塊或數字輸入框設定水平偏移、垂直偏移、模糊半徑和擴散半徑；使用取色器或輸入 HEX 色值（如 #000000）選擇陰影顏色，並設定不透明度（0–1）。需要內陰影時勾選「內陰影」。
2. 預覽效果：上方範例框會隨參數變化即時更新，便於在複製前確認效果。
3. 複製程式碼：確認滿意後點擊「複製程式碼」，將生成的 box-shadow CSS 複製到剪貼簿，再貼上到你的 CSS 檔案或內聯樣式中（如用於卡片、按鈕等元素）即可。