為 JPG、PNG 或 WebP 加上陰影，使用四個整數像素控制項 —— 水平與垂直位移從 -500 到 500、模糊半徑從 0 到 250、不透明度百分比從 0 到 100，以及一個六位數十六進位顏色 —— 然後下載一個透明 PNG，其畫布在每一側都已加寬，確保陰影絕不會在原始影像邊緣被裁切。為影像加上陰影 會在目前的瀏覽器分頁中執行所有解碼、繪製與 PNG 編碼步驟，因此來源檔案永遠不會送到遠端影像服務。在搜尋「為影像加上陰影 Canva」的設計師，通常會希望結合位移、模糊、不透明度與顏色，並產出一張可直接放入 mockup、貼紙表、縮圖或樣品圖的透明 PNG，而這正是本機工作流程所能提供的。Canva 在專案內提供同樣的四項輸入，而這個瀏覽器工具則能在沒有專案、沒有登入、也沒有排隊的情況下，產生同樣的透明 PNG。
Canva 風格的陰影是如何運作的
在 Canva、Figma、Photoshop 或任何影像編輯器中，陰影是原始像素的第二份模糊、通常半透明的拷貝，向水平和垂直方向各偏移一小段距離，並以所選的顏色染色。這個第二份拷貝能創造出深度感，將前景與背景分離，並讓一個扁平矩形看起來像一張貼紙、一張卡片、一個按鈕、一張縮圖，或一個浮在下層之上的 UI 元件。陰影並不是原始影像的一部分，這也是為什麼設計師會希望把它烘焙在透明畫布上，而不是一張在主體周圍帶著有色邊框的扁平矩形。一旦陰影存在於透明 PNG 內，這張 PNG 就能放到任何背景上 —— 無論是亮色、暗色、漸層或照片 —— 每次移動時都不必重新製作該效果。
Canva 的陰影效果是達成這個輸出的知名路徑之一：選取影像或元件、開啟 Effects、找到 Shadow 控制項，再調整位移、模糊、不透明度與顏色。在 Canva 內，結果會合成到使用者正在編輯的畫布或設計上。在 Canva 之外，當讀者想要的是一張已經圍繞前景畫好陰影的透明 PNG 時，瀏覽器 Canvas 陰影渲染器所接受的，同樣也是這四個數值控制項，這就是為什麼一個本機瀏覽器陰影工具能重現該視覺效果，卻不需要 Canva 專案的其他部分。當來源檔案不能離開裝置、當還沒開啟專案、或當目標是產生一張帶陰影的透明 PNG 而非合成的設計時，這條本機路徑就特別有用。
控制項：位移、模糊、不透明度與顏色
產生陰影的四個輸入小到可以同時放在一個畫面上，而且每一項都有明確的範圍。位移決定陰影相對於來源的方向；模糊會柔化陰影邊緣；不透明度設定陰影色調看起來有多實心；顏色則設定陰影本身的色調。
| 控制項 | 控制內容 | 可接受範圍 |
|---|---|---|
| 水平位移 | 將陰影向右（正值）或向左（負值）移動。 | -500 到 500，單位為整數像素 |
| 垂直位移 | 在下載的影像中，將陰影向下（正值）或向上（負值）移動。 | -500 到 500，單位為整數像素 |
| 模糊 | 使用瀏覽器的 Canvas shadowBlur 效果來柔化陰影邊緣。 | 0 到 250，單位為整數像素 |
| 不透明度 | 設定陰影色調呈現的實心程度。 | 0 到 100，單位為整數百分比 |
| 顏色 | 陰影色調的精確顏色。 | 六位數十六進位（#RRGGBB） |
在幕後，這些輸入會餞入 CanvasRenderingContext2D 屬性，例如瀏覽器的 Canvas shadowBlur，這些屬性會在來源影像繪製之前先經過驗證並套用。由於底層使用的是瀏覽器的 Canvas 陰影渲染器，而非列印渲染器，因此不同瀏覽器引擎之間在羽化柔度上的細微差異是正常的，也是這個效果定義的一部分。輸入必須是整數像素，這讓輸出尺寸可預測、陰影幾何可重現。
如何在本機為影像加上陰影
當一張本機 JPG、PNG 或 WebP 已儲存在磁碟上時，下列三個步驟就能產出可下載、且已烘焙陰影的透明 PNG。
- 開啟「為影像加上陰影」，挑選一張瀏覽器能解碼、本機端且不超過 25 MiB 的 JPG、PNG 或 WebP。所選檔案永遠不會離開這個分頁。
- 輸入水平和垂直位移，單位為 -500 到 500 之間的整數像素；模糊設為 0 到 250；不透明度設為 0 到 100；並輸入一個六位數十六進位顏色作為陰影。
- 選擇「Add shadow」，確認工具所回報的展開後寬度與高度，然後下載 PNG。下載檔案會以來源檔案命名，並在末尾加上 -shadow，因此 portrait.png 會變成 portrait-shadow.png。
在首次渲染之後變更來源影像或任何設定，會讓舊預覽失效並撤銷舊的下載連結，因此你儲存的檔案永遠對應目前的設定。這讓你可以安全地在一堆畫板或縮圖之間反覆嘗試，而不會在下載資料夾留下過時的渲染結果。結果區塊也會回報精確的展開後寬度與高度，加上編碼後大小，這對於必須精準套進行銷頁或列印樣板固定框格的 PNG 來說非常實用。
為什麼輸出的 PNG 會比來源大
下載的 PNG 刻意比輸入更寬、更高，因為畫布的規劃是為了讓陰影能被完整看見。新尺寸由兩條規則決定：
- 每一側都會加上兩倍模糊值，預留羽化邊緣落下的空間。
- 在受影響的那一側加上絕對方向位移，因此正向水平位移會在右側加上對應像素，負向垂直位移則會在上方加上對應像素。
舉個具體的例子：一張 40 乘 20 的來源影像，若右側位移 8 像素、向上位移 4 像素，模糊 6 像素，就會變成 72 乘 48 像素。先算寬度：40（來源）+ 12（左側保留的模糊）+ 12（右側保留的模糊）+ 8（正向右側位移）= 72 像素。再算高度：20（來源）+ 12（上側保留的模糊）+ 12（下側保留的模糊）+ 4（向上位移的絕對值）= 48 像素。來源影像會擺在這個更大的畫布內，因此模糊與位移絕不會在原本的邊緣被悄悄裁切。
頁面上的預覽可以縮放以配合版面，但下載的檔案會保留根據來源與目前陰影設定計算出來的自然輸出解析度。系統會回報展開後的寬度與高度，加上編碼後檔案大小，因此放進 mockup 或縮圖堆疊中的 PNG，每次都會有可預測的邊界。
檔案類型、容量限制與本機處理
系統接受三種輸入格式：JPG、PNG 與 WebP。每個檔案都必須是瀏覽器能解碼的，且每一張解碼後的影像以及每一個展開後的畫布，都會在工具配置任何資源之前，與有限的畫布預算進行比對。輸入檔案必須是瀏覽器可解碼的 JPG、PNG 或 WebP，且大小不超過 25 MiB。檔案類型無效、檔案為空、解碼後影像過大、輸出尺寸不可能、解碼錯誤、缺少 Canvas 支援，以及 PNG 編碼失敗等情況，都會顯示明確的錯誤，而不是產生一張半完成的影像。
由於檔案是在目前的瀏覽器分頁內進行讀取、解碼、繪製與編碼，沒有任何像素會送到遠端影像服務。沒有帳號，也沒有上傳步驟。JPG 與 WebP 來源會被解碼為瀏覽器像素，因此原本的壓縮位元組與中繼資料不會保留在輸出的 PNG 中。PNG 來源則會保留其透明度，而來源外部以及所產生陰影外部的像素，在 PNG 輸出中仍然保持透明，這也正是這個結果能乾淨地疊在彩色或照片背景上、不會產生光暈的原因。
如果工作流程中最需要留意的是模糊行為，那麼在瀏覽器中使用 Canva 模糊效果這篇實用指南，會說明同一個模糊參數如何分別影響影像的柔化程度，以及陰影的柔和邊緣，這能讓兩種效果更容易並排微調。
這個工作流程適用（與不適用）的情境
它適用於希望單純得到一張點陣陰影、不必為了這個效果打開整個設計 App 的場合：放在卡片或首頁上的縮圖、印刷樣板用的貼紙 PNG、樣品快照、行銷頁上的產品圖、mockup 佔位圖，以及需要讓前景讀起來像獨立圖層的社群圖片。當來源無法上傳時 —— 例如私人螢幕截圖、未公開的產品渲染圖或客戶素材 —— 它也是個乾淨的選擇，因為整個流程都在本機執行，沒有任何像素離開裝置。
它不適用於幾個看起來相似、但底層機制不同的工作流程。本工具並不宣稱與 CSS box-shadow 位元級完全相同，因為瀏覽器 Canvas 模糊與 CSS 模糊依賴的是不同的渲染路徑。它不會加邊框、不會去背、不會偵測主體、不會產生透視地板陰影，也不會模擬攝影棚燈光。每次渲染它只會產生一張單純的點陣陰影 —— 沒有預設樣式、不能堆疊、也沒有內陰影 —— 而整個陰影都存在於它輸出的那張透明 PNG 之中。
對於把陰影當成眾多合成功能之一的設計 App 來說，Canva 仍能在編輯畫布中提供陰影。至於一張可直接下載、帶陰影的透明 PNG，「為影像加上陰影」則能在不附加任何其他東西的情況下產生同樣的四項輸入結果，而且來源永遠不會離開瀏覽器。
延伸閱讀：在瀏覽器中為影像加上陰影以用於 CapCut。