陰影效果是透過在瀏覽器算繪的影像副本上設定水平偏移、垂直偏移、模糊半徑、不透明度與顏色來加入照片中的，接著將結果匯出為一個比原始影像更大的透明 PNG，這樣陰影才不會被裁切。陰影是由瀏覽器的 Canvas API 在來源檔案於本機解碼後繪製，照片從未離開裝置。由於輸出畫布經過刻意擴展，在每個邊緣預留兩倍模糊值的空間，並在受影響的那一側加上絕對方向偏移，因此即使偏移將陰影向外推動數百像素，陰影的羽化邊緣仍能保持可見。這讓光柵式陰影效果在產品照、社群縮圖、貼紙表、模型mockup，以及任何需要乾淨矩形裁切搭配主體周圍清晰光暈的應用中都很實用。五個輸入——也就是 X 偏移、Y 偏移、模糊、不透明度，以及一個六位數十六進位顏色字串——控制了最終形狀，而 canvas shadow blur 屬於瀏覽器算繪效果，因此即便使用相同的五個輸入，實際羽化像素在不同瀏覽器引擎間仍可能略有差異。
為何陰影效果對照片很重要
陰影效果能將主體與背景區隔開，模擬環境光遮蔽，並為平面影像增添深度。在電子商務產品頁面上，椅子照片下方若有一道柔和陰影，會讓椅子看起來像是放在地板上，而不是懸浮在頁面中。在社群縮圖網格中，均勻的陰影能將各自獨立的影像串聯成一組連貫的集合，讓每張照片看起來像一個物件，而不是一塊像素塊。在貼紙表中，細微的偏移陰影能為每張貼紙帶來觸感邊緣。在這些情境中，目標都是相同的:產生一個透明 PNG，在可見的前景周圍帶有柔和且略微偏移的光暈。
照片通常不需要太複雜的陰影。6 到 12 像素的模糊搭配單一方向 4 到 8 像素的偏移，通常就能產生乾淨的效果。確切數字取決於來源解析度，因為 600 像素寬的產品照能承載比 64 像素圖示更大的絕對模糊，但陰影的形狀會依照這五個輸入等比例縮放，且偏移、模糊與畫布擴展之間的關係在任何尺寸下都保持恆定。
決定陰影形狀的五個控制項
由 為圖片加上陰影 工具產生的每個陰影效果，都是由五個數值所描述。下表列出每個控制項、其允許範圍，以及它對算繪輸出的影響。
| 控制項 | 允許範圍 | 對算繪陰影的影響 |
|---|---|---|
| 水平偏移 | -500 到 500，單位為整數像素 | 正值將陰影向右移動;負值將其向左移動 |
| 垂直偏移 | -500 到 500，單位為整數像素 | 正值在輸出中將陰影向下移動;負值將其向上移動 |
| 模糊半徑 | 0 到 250，單位為整數像素 | 柔化陰影邊緣;數值越大，羽化範圍越寬 |
| 不透明度 | 0 到 100，單位為整數百分比 | 控制陰影在所覆蓋表面上呈現的深淺程度 |
| 顏色 | 六位數十六進位 (例如 000000) | 設定陰影的色調 |
工具在算繪前會驗證每個輸入。負值偏移會在對應側加入畫布空間，因此陰影絕不會被繪製於輸出矩形之外。模糊值大於零時，畫布的每個邊緣都會保留等於兩倍模糊值的邊距，不論偏移方向為何，這正是確保羽化邊緣永遠不會在原始影像邊界被裁切的關鍵。
如何在瀏覽器中為照片加上陰影
開啟「為圖片加上陰影」工具，並依照下列步驟操作。整個流程都在當前分頁中執行;不會進行任何上傳。
- 選擇一個本機的 JPG、PNG 或 WebP 檔案。該檔案必須可被瀏覽器解碼，且大小不得超過 25 MiB。
- 請查看顯示的來源尺寸以及工具的像素上限，以確保輸出符合畫布預算。
- 輸入 -500 到 500 之間的整數像素水平偏移。正數將陰影向右移動;負數將其向左移動。
- 輸入 -500 到 500 之間的整數像素垂直偏移。正數在輸出中將陰影向下移動;負數將其向上移動。
- 輸入 0 到 250 之間的整數像素模糊半徑。較高的數值會產生更柔和、更寬的羽化效果，並在每個邊緣預留更多的畫布邊距。
- 輸入 0 到 100 之間的整數百分比作為不透明度。對大多數照片來說，40 到 60 之間的數值看起來會像是柔和自然的陰影。
- 輸入一個六位數十六進位顏色，例如 000000 表示中性黑色陰影，或輸入自訂數值以產生帶色調的效果。
- 選擇「加入陰影」。工具會使用 canvas shadow 狀態算繪來源一次，然後再不使用該狀態算繪一次，接著將結果編碼為 PNG。
- 請確認顯示的擴展後寬度與高度。這些數值包含了模糊邊距，以及受影響側的絕對方向偏移。
- 選擇下載按鈕以儲存一個以來源命名的 PNG，例如 portrait-shadow.png。即使頁面上的預覽已縮放至符合版面，檔案仍維持完整解析度。
若來源或任何設定變更，先前的結果將失效，其暫存下載 URL 也會被撤銷，因此您必須再次選擇「加入陰影」以重新產生輸出。
為何下載的檔案會比來源大
輸出 PNG 幾乎總是比原始照片更寬、更高，或同時更寬且更高。這是刻意設計的:畫布會在每個邊緣預留兩倍模糊值的空間，並在受影響的那一側加上絕對方向偏移。接著將原始影像放置於該擴展區域內，使得陰影的柔和邊緣以及任何方向性的推移，都不會在原本的影像邊界被裁切。
試想一個 40 乘 20 的來源影像，搭配 8 像素的向右偏移、4 像素的向上偏移，以及 6 像素的模糊。輸出寬度為 40 + 2x6 (左側模糊邊距) + 2x6 (右側模糊邊距) + 8 (絕對向右偏移) = 72 像素。輸出高度為 20 + 2x6 (頂部模糊邊距) + 2x6 (底部模糊邊距) + 4 (絕對向上偏移) = 48 像素。因此陰影會落在 72 乘 48 的畫布中，而來源照片仍佔據其中的原始 40 乘 20 矩形。相同的公式適用於任何解析度:來源寬度加上四倍模糊加上絕對水平偏移;來源高度加上四倍模糊加上絕對垂直偏移。
適用於常見照片類型的陰影設定
不同的照片主體適合不同的陰影形狀。下表說明常見情境與通常能產生乾淨結果的控制項之間的對應關係。請將其作為起點，再依喜好進行調整。
| 照片類型 | 偏移 (X, Y，單位為像素) | 模糊 (像素) | 不透明度 (%) | 備註 |
|---|---|---|---|---|
| 白頁上的產品 | 0, 6 | 10-14 | 35-50 | 單一向下陰影呈現與地面接觸的感覺 |
| 人像或大頭照 | 4, 6 | 12-18 | 30-45 | 微小的對角偏移讓臉部從背景中浮起 |
| 貼紙或徽章 | 6, 6 | 4-8 | 60-80 | 較緊湊的模糊與較高的不透明度，呈現銳利的印刷邊緣 |
| 應用程式或網頁縮圖 | 2, 4 | 6-10 | 40-55 | 較小的偏移讓陰影保持在卡片版面內 |
| 去背主體疊在照片上 | 0, 8 | 14-22 | 25-40 | 較低的不透明度可避免陰影與新背景相互競爭 |
這些是起點，並非固定配方。較高解析度的來源影像可以承載比例上更大的偏移與模糊，而不會讓陰影看起來過重。低解析度的來源則適合使用較小的數字搭配較高的不透明度，以便在縮圖尺寸下仍保持光暈清晰可見。
工具無法做到的事
「為圖片加上陰影」工具是一個單純的光柵式陰影算繪器。它不會偵測主體、不會移除背景、不會加上邊框，也不會模擬攝影棚燈光。它不會產生透視地板陰影、長長的夕陽陰影，或任何需要知道影像中地面位置的效果。它也不聲稱能與 CSS box-shadow 位元級完全等效;canvas shadow blur 屬於瀏覽器算繪效果，而非印刷預壓測量，因此實際羽化像素在不同瀏覽器引擎間可能略有差異。對於像素級精度的預壓陰影，使用專用編輯器才是正確的選擇。
它的功能範圍有限且可預測:一個本機影像、五個數值控制項、一個透明 PNG 輸出，以及一個刻意擴展的畫布，以確保陰影不會在原始邊緣被靜默裁切。
本機處理與隱私
來源檔案會在當前瀏覽器分頁內完成解碼、繪製、編碼、預覽與下載。工具不會上傳照片，也不會將其像素傳送至遠端影像服務。JPG 與 WebP 來源會被解碼為瀏覽器像素，這表示原始壓縮位元組以及任何嵌入的中繼資料都不會保留在輸出 PNG 中;若需要保留中繼資料，則必須使用支援 EXIF 的處理流程。PNG 來源中的透明區域在輸出中仍保持透明，除了來源 alpha 通道本身對陰影有貢獻的部分。
無效的檔案類型、空檔案、解碼後過大的影像、解碼錯誤、不可能的輸出尺寸、缺少畫布支援，以及 PNG 編碼失敗，這些情況都會以可見的錯誤呈現，而不是靜默失敗——這對於一個在每次算繪時都會在兩個維度上調整畫布大小的工具來說，是合適的行為。下載的檔案一律為以來源命名的 PNG，例如 portrait-shadow.png，因為陰影通常需要原始矩形影像之外的透明像素，而 JPG 無法承載這種透明度。頁面上顯示的預覽可能已縮放以符合版面，但儲存的檔案會保持由來源尺寸與所選陰影設定計算出的自然輸出解析度，正如瀏覽器的 Canvas shadowBlur 參考文件 所記載。
若想進一步了解，請參閱 在本機對多張影像套用線上照片濾鏡。
若想進一步了解，請參閱 免註冊的黑白照片轉換器。