CSS 盒子陰影產生器
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
最後更新：2026 · 免費線上工具
什麼是 CSS 盒子陰影產生器？
免費線上視覺化編輯器，建立CSS box-shadow並複製代碼
使用方法
- 1 選擇預設 — 使用預設按鈕快速開始。
- 2 調整滑桿 — 使用X/Y偏移、模糊和擴散滑桿調整陰影。
- 3 預覽 — 在上方預覽中即時查看結果。
- 4 複製CSS — 使用複製按鈕取得box-shadow CSS。
相關工具
常見問題
可以，使用'新增陰影'按鈕可以疊加多個陰影。
支援，在每個陰影上啟用Inset核取方塊即可建立內陰影。
提供5種預設：Subtle、Medium、Large、Inset和Double。
可以，在顏色輸入框中直接輸入rgba(0,0,0,0.15)格式即可。
不會。所有計算都在瀏覽器中完成。