CSS 盒陰影生成器 使用指南

box-shadow 用偏移、模糊、擴散與顏色定義元素投影。拖拽調節各參數，實時看效果並複製生成的 CSS，前端必備。

核心功能

• 偏移 X/Y/模糊/擴散滑桿
• 顏色與透明度選擇
• 內陰影 inset 開關
• 實時預覽
• 一鍵複製 CSS

適用場景

• 卡片懸浮投影設計
• 按鈕立體感
• 分隔層次

使用步驟

1. 調節 X/Y 偏移與模糊
2. 選陰影顏色
3. 開 inset 做內陰影
4. 複製 CSS 到項目

實用技巧

• X/Y 同 0、模糊大→柔和彌散陰影
• inset 做內凹效果
• 避免過度投影顯髒

常見問題

inset 是什麼？

加 inset 陰影變為元素內部，營造內凹。

能給個例子嗎？

box-shadow: 0 4px 12px rgba(0,0,0,.15) 是常見卡片投影。