陰影產生器

📖 工具介紹

陰影產生器是一款幫助前端與 UI 設計師快速調出精緻投影的線上 CSS box-shadow 視覺化工具。手寫 box-shadow 常常要在除錯面板和代碼之間來回切換，本工具把整條屬性拆成四個直觀的參數：X 偏移、Y 偏移、模糊半徑與擴展距離，外加顏色與不透明度，並用一張真實卡片在棋盤格舞台上即時呈現投影效果，拖動滑桿的每個像素變化都立刻可見。工具支援多層陰影疊加：點「新增陰影層」即可新增一層，每層擁有獨立參數，層與層之間用逗號組合，先列出的層繪製在最上方，最多可疊 5 層，輕鬆做出由近及遠、由濃到淡的層次感。左側層清單帶小色樣預覽，點任一層即可切換編輯目標，右側滑桿隨即同步到該層。調好後，底部代碼框自動拼出完整的 box-shadow 敘述，一鍵複製或下載為 .css 檔案。所有計算與渲染都在瀏覽器本機完成，完全離線可用。

✨ 功能特點

• 即時預覽：白色卡片在棋盤格舞台上投影，調參立刻可見
• 四參數滑桿：X/Y 偏移、模糊、擴展，搭配數字框精準定位
• 顏色與透明度：取色器選色，不透明度獨立調整，自動輸出 rgba
• 多層疊加：2–5 層陰影彈性組合，層清單點擊切換編輯
• 標準代碼：自動拼接 box-shadow 敘述，附屬性名複製即用
• 範例與下載：內建柔和多層範例，代碼可存為檔案歸檔

📝 使用方式

1. 在左側層清單點要編輯的陰影層，選取的層會高亮
2. 拖動右側 X/Y 偏移、模糊、擴展滑桿，檢視上方卡片陰影
3. 用取色器修改陰影顏色，用不透明度滑桿調濃淡
4. 需要更豐富層次時點「新增陰影層」，多餘時點「刪除目前層」
5. 滿意後點「複製代碼」貼上到專案，或「下載 CSS」儲存

⚠️ 注意事項

• 層數限制：至少 1 層、最多 5 層，超出範圍會給出提示
• 疊加順序：先列出的陰影繪製在最上層，刪除層後自動重排
• 參數範圍：偏移 -50~50px、模糊 0~80px、擴展 -30~30px、不透明度 0~100%
• 顏色輸出：陰影顏色自動轉為 rgba() 寫法，含透明度參數
• 本機執行：所有渲染與代碼產生皆在瀏覽器完成，無網路請求