CSS 陰影生成器

← ToolBox / CSS 陰影生成器

🎭 CSS Shadow Generator

盒子陰影
文字陰影
Preview

✨ 預設效果

Click a preset to apply its shadow.

📐 計算公式 / 原理
按 offset / blur / spread / color 拼裝 box-shadow（支援外陰影與 inset 內陰影），提供常用預設並即時預覽；用於 UI 質感設計。

💡 使用說明

📚 深度解析：CSS 陰影生成器

💡 常見使用場景

  • 卡片投影。
  • 按鈕懸浮。
  • 凹陷效果。
生成柔和陰影
<p><strong>輸入：</strong>y8 模糊24 色淡。</p><p><strong>處理：</strong>拼 box-shadow。</p><p><strong>輸出：</strong>CSS 與預覽。</p>

❓ 常見問題（FAQ）

多層怎麼寫？
逗號分隔多個 shadow 值即可疊加。
陰影方向怎麼定？
由 x/y 偏移決定，正向右下、負向左上；調正負即改光源方向。
會儲存或上傳我的內容嗎？
結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
⚠️ 使用說明與注意事項

🔗 相關工具

📈 CSS動畫生成器（關鍵幀視覺化） - 免費線上工具，純前端處理 | ToolBox免費線上工具箱CSS動畫生成器（關鍵幀視覺化） 🎵 Web Audio 節拍器 - 免費生成器工具，線上節拍器 | ToolBox免費線上工具箱線上節拍器 🔳 二維碼生成器（已有，可加強定製） - 免費線上工具，純前端處理 | ToolBox免費線上工具箱二維碼生成器（已有，可加強定製） 🏷️ 條形碼生成器（EAN-13等） - 免費線上工具，純前端處理 | ToolBox免費線上工具箱條形碼生成器（EAN-13等） 📈 盒子陰影生成器（視覺化調整） - 免費線上工具，純前端處理 | ToolBox免費線上工具箱盒子陰影生成器（視覺化調整）
📖關於「CSS 陰影生成器」 ▼

📝工具簡介

CSS 陰影生成器。設計創意工具，視覺化操作，一鍵生成 CSS 程式碼。

✨功能特點

🎯使用場景