CSS 盒子陰影產生器
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
最後更新：2026 · 免費線上工具
什麼是 CSS 盒子陰影產生器？
免費線上CSS box-shadow產生器，可調節偏移、模糊、擴散、顏色和內陰影inset並即時預覽陰影，產生可複製的box-shadow CSS代碼。 適合在測試與開發中即時產生所需數值，所有產生過程都在瀏覽器本機執行，資料不會上傳伺服器，無需安裝或註冊即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
使用方法
- 1選擇預設— 使用預設按鈕快速開始。
- 2調整滑桿— 使用X/Y偏移、模糊和擴散滑桿調整陰影。
- 3預覽— 在上方預覽中即時查看結果。
- 4複製CSS— 使用複製按鈕取得box-shadow CSS。
相關工具
CSS 漸層產生器免費線上視覺化工具，設計linear、radial、conic漸層，調整顏色停止點和角度，一鍵複製網頁背景的CSS程式碼。 適合在測試與開發中即時產生所需數值，所有產生過程都在瀏覽器本機執行，資料不會上傳伺服器，無需安裝或註冊即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
CSS 圓角產生器免費線上CSS border-radius產生器，透過8個獨立圓角控制點和滑桿即時預覽圓角形狀，並產生可複製的border-radius CSS代碼。 適合在測試與開發中即時產生所需數值，所有產生過程都在瀏覽器本機執行，資料不會上傳伺服器，無需安裝或註冊即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
CSS Flexbox 產生器免費線上CSS Flexbox視覺化編輯器，調節justify-content、align-items、flex-direction等屬性即時預覽版面，並產生可複製的Flexbox CSS代碼。 適合在測試與開發中即時產生所需數值，所有產生過程都在瀏覽器本機執行，資料不會上傳伺服器，無需安裝或註冊即可免費使用。
常見問題
可以，使用'新增陰影'按鈕可以疊加多個陰影。
支援，在每個陰影上啟用Inset核取方塊即可建立內陰影。
提供5種預設：Subtle、Medium、Large、Inset和Double。
可以，在顏色輸入框中直接輸入rgba(0,0,0,0.15)格式即可。
不會。所有計算都在瀏覽器中完成。