CSS 陰影產生器
免費線上 CSS 陰影產生器。即時預覽製作複雜的多層陰影。可自訂位移、模糊、擴散、顏色與內陰影屬性。
使用視覺化編輯器設計多層 CSS box-shadow 陰影效果，自訂位移、模糊、擴散與色彩，打造卡片與按鈕立體感。
CSS 陰影產生器
免費線上 CSS 陰影產生器。即時預覽製作複雜的多層陰影。可自訂位移、模糊、擴散、顏色與內陰影屬性。
關於這個工具
使用視覺化編輯器設計多層 CSS box-shadow 陰影效果，自訂位移、模糊、擴散與色彩，打造卡片與按鈕立體感。
陰影設定
區塊設定
背景顏色
區塊顏色
陰影設定
圖層 1
陰影顏色
水平位移 (X) (10px)
垂直位移 (Y) (10px)
模糊半徑 (5px)
擴散半徑 (0px)
結果將顯示於此...
預覽
CSS 程式碼
陰影設定
區塊設定
背景顏色
區塊顏色
陰影設定
圖層 1
陰影顏色
水平位移 (X) (10px)
垂直位移 (Y) (10px)
模糊半徑 (5px)
擴散半徑 (0px)
常見問題
關於這個主題的常見疑問與實用解答。
可以自訂哪些屬性？
您可以自訂水平與垂直位移、模糊半徑、擴散半徑、陰影顏色，以及切換內陰影模式。
可以新增多層陰影嗎？
可以，可疊加多層陰影以營造複雜的立體效果。每層都可以有獨立的位移、模糊、擴散與顏色設定。
產生的程式碼跨瀏覽器相容嗎？
是的，標準 CSS box-shadow 屬性無需供應商前綴即可在所有現代瀏覽器中運作。
我的資料會被傳送到伺服器嗎？
不會，box-shadow CSS 生成完全在您的瀏覽器中執行。您的陰影設定透過 JavaScript 在本地處理，絕不會離開您的裝置。