為圖片添加陰影

為圖片添加陰影工具能用柔和、可信的陰影把任意圖片從頁面上托起來——全程在您的瀏覽器中完成。上傳照片、截圖、標誌或去背 PNG，拖動光源設定角度，再調整模糊、擴展、不透明度與顏色。對於透明 PNG，陰影由圖片的 Alpha 通道產生，因此產品或貼紙會按自身輪廓而不是矩形投射陰影。可匯出帶透明背景的 PNG、純色或漸層背景上的 JPG，或複製對應的 CSS box-shadow 程式碼。不會上傳任何內容——您的圖片不會離開您的裝置。

構成陰影的三個數值：偏移、模糊和擴展

幾乎所有糟糕的陰影，都是把這三個裡的某一個弄錯了。偏移是陰影被推離主體的距離——它告訴觀者光線在哪、物體浮得有多高。模糊是邊緣有多柔和：小模糊讀作硬、直射光（陽光、閃光燈），大模糊讀作漫射光（陰天、柔光箱）。擴展會在套用模糊之前放大或縮小陰影形狀，這樣就能得到厚重光暈，或略微收進物體下方的陰影。

如何為圖片添加陰影

1. 上傳圖片：將圖片拖到上傳框，或點選以選擇一張。不會上傳任何內容——檔案直接讀入您的瀏覽器。
2. 放置光源：在光源面板上拖動太陽。陰影落在相反一側，拖得離中心越遠，陰影推得越遠。方向鍵也可以。
3. 塑造陰影：選擇類型——投影、分層、長陰影或光暈——然後設定模糊、擴展、不透明度和陰影顏色。
4. 選擇背景：PNG 可保持透明，或填上純色或漸層。額外內距會在結果周圍留出呼吸空間。
5. 下載或複製：按原始、一半或 2× 尺寸儲存 PNG 或 JPG——或複製產生的 CSS，在網頁元素上重複使用同一陰影。

陰影跟隨主體，而不是外框

大多數線上陰影工具會在檔案後面畫一個矩形。這對照片沒問題，但對去背的產品圖、標誌或貼紙就不對了：圓瓶子不該投下方形陰影。本工具讀取圖片的 Alpha 通道，按真實剪影產生陰影，因此透明區域不會帶陰影。上傳透明 PNG 時，您會看到一條綠色提示確認這一點。對於普通不透明照片，剪影就是畫面矩形——如果設定了圓角，會先圓化。

該用哪種陰影類型？

為什麼用百分比，而不是像素

這裡的每個滑桿都是圖片較短邊的百分比。9% 的模糊在 400 像素縮圖和 4000 像素照片上看起來一樣，因此您喜歡的預設換上更大圖片時仍然適用——不用重新計算。工具仍會在模糊滑桿旁和 CSS 面板中顯示等效像素值，以便您需要真實數字時使用。

做出可信陰影的技巧

我的圖片會保密嗎？

是的。與那些把圖片上傳到伺服器處理的線上編輯器不同，本工具使用 HTML5 canvas 完全在您的網頁瀏覽器中執行。圖片不會離開您的裝置，不會被儲存，也無需建立帳戶。關閉分頁，圖片就消失了。

常見問題

這個陰影工具免費且保護隱私嗎？

是的。本工具完全免費，並使用 HTML5 canvas 完全在您的網頁瀏覽器中執行，因此圖片永遠不會上傳到任何伺服器，會保留在您自己的裝置上。下載的圖片沒有浮水印，也無需註冊。

陰影會跟隨透明 PNG 的形狀嗎？

會。陰影由圖片的 Alpha 通道產生，因此去背的產品、標誌或貼紙會按自身輪廓投射陰影，而不是矩形。如果是普通不透明照片，剪影就是照片矩形，若設定了圓角則會先圓化。

如何保持背景透明？

將背景設為透明並下載 PNG。只會繪製陰影和主體，之後可以把結果放到任意顏色上。JPG 無法儲存透明度，因此匯出 JPG 時背景會填成白色。

模糊和擴展有什麼差別？

模糊會柔化陰影邊緣，讓它在一段距離內逐漸淡出。擴展會在模糊之前放大或縮小陰影形狀本身，因此大擴展配小模糊會得到硬邊光暈，小擴展配大模糊會得到柔和雲團。

為什麼我的陰影在圖片邊緣被裁切了？

陰影需要圖片外側的空間。本工具會根據偏移、模糊和擴展自動加入內距，您也可以用「額外內距」滑桿再增加一些。如果把 JPG 匯出到彩色背景上，陰影就落在這段內距上。

可以得到同一陰影的 CSS 嗎？

可以。CSS 面板會顯示可直接貼上的 box-shadow 和 filter drop-shadow 規則，與目前設定相符，像素值依您的圖片量測。複製後即可讓網頁元素呈現相同外觀，無需匯出檔案。

更多資源

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• Alpha 合成 — 維基百科