圖層
X 位移4px
Y 位移4px
模糊8px
擴散0px
%
內陰影
什麼是 CSS 陰影產生器？
CSS 陰影產生器讓你以視覺化方式建立 box-shadow 值，並立即複製 CSS。可調整位移、模糊、擴散、顏色與不透明度，並即時預覽。
如何使用陰影產生器
- 調整 X/Y 位移、模糊與擴散滑桿。
- 選擇陰影顏色並設定不透明度。
- 切換「內陰影」以套用內陰影效果。
- 新增更多圖層以製作複雜陰影。
- 複製 CSS 並貼到你的專案中。
了解更多▾
Box Shadow 參數
- X/Y 位移 —水平與垂直位移陰影
- 模糊 —陰影邊緣的柔和/模糊程度
- 擴散 —擴張或收縮陰影大小
- 內陰影 —在元素內部繪製陰影
常見問題
我可以新增多個陰影嗎？
可以。點選「Add Layer」即可堆疊多個 box-shadow 值，輸出 CSS 時會以逗號分隔。
如何使用產生的 CSS？
點選「Copy CSS」，將 box-shadow 屬性直接貼到你的 CSS 檔案或 style 區塊中。