CSS 陰影產生器
在瀏覽器本地調整 box-shadow 位移、模糊、擴散、透明度、圓角與 inset,支援即時預覽與 CSS 複製。
CSS 陰影產生器
CSS 陰影產生器可在瀏覽器本地以視覺化方式調整 box-shadow 的水平位移、垂直位移、模糊半徑、擴散半徑、透明度與 inset 參數,並即時預覽卡片或按鈕的陰影效果。
如何使用?
- 調整水平位移、垂直位移、模糊半徑與擴散半徑。
- 選擇陰影顏色、背景顏色,並設定透明度與圓角。
- 依需求切換為 inset 內陰影效果。
- 把產生的 CSS 複製到元件樣式或設計交接文件中。
工具特性
- 支援常見 box-shadow 參數視覺化調整
- 支援外陰影與 inset 內陰影
- 本地即時預覽並複製 CSS 輸出
為什麼使用這個工具?
- 快速調整卡片、按鈕、輸入框與浮層的陰影層級
- 減少手寫陰影語法與反覆刷新頁面試錯的時間
- 方便設計和前端直接共享可落地的 CSS 參數