陰影效果可以直接在目前的瀏覽器分頁內,為 JPG、PNG 或 WebP 加上,方法是使用 為圖片加上陰影 工具,它會解碼來源檔案、使用瀏覽器的陰影渲染器將其繪製到一張放大的畫布上,然後輸出一張透明 PNG,整個過程完全不會把圖片送到遠端伺服器。來源圖片會先解碼一次成為瀏覽器中的像素,接著以水平與垂直位移、模糊半徑、不透明度百分比,以及精確的六位數十六進位色彩來渲染,而畫布刻意做得比來源大,避免陰影在原本的邊緣被裁切。來源在陰影狀態啟用的情況下繪製一次之後,會再以不啟用陰影的狀態繪製第二次,讓可見的前景保持清晰,不會被自身的半透明陰影像素柔化。因為第二次繪製會清除陰影狀態,原始圖片會保留在自身陰影的上方,而不會被半透明色彩沖淡。輸出永遠是 PNG,檔名以來源檔案命名(例如 portrait-shadow.png),並包含精確的展開寬度、高度以及編碼後的大小。
瀏覽器如何渲染陰影效果
此工具中的陰影效果來自瀏覽器的 Canvas API,而不是預先渲染的效果或 CSS 圖層。Canvas 2D 環境接受四個陰影屬性:X 位移、Y 位移、模糊半徑,以及色彩,這些值會直接從已驗證的表單控制項傳入。當來源圖片以這些屬性設定繪製時,瀏覽器會在圖片本身被繪製到上層之前,先繪製每一個不透明像素的有色、位移、模糊版本。
輸出畫布在兩次繪製之前都會刻意放大。展開的方式遵循一條固定規則:畫布會在每一邊各加上兩倍的模糊半徑,然後在位移指向的那一邊再加上絕對方向的位移量。這些保留的空間就是避免一般陰影在來源圖片原本的矩形邊緣被悄悄裁切的原因。兩次繪製完成後,畫布會編碼為 PNG,讓來源周圍的空白邊距在下載的檔案中保持完全透明。根據關於 Canvas shadowBlur 屬性 的 MDN 文件,模糊半徑是由底層瀏覽器引擎解讀,這也是為什麼在不同渲染環境下,精確的柔邊像素可能會略有差異。
你可以調整的控制項
| 控制項 | 可接受的值 | 作用 |
|---|---|---|
| 水平位移 | -500 到 500 像素(整數) | 正值將陰影往右移;負值將陰影往左移。 |
| 垂直位移 | -500 到 500 像素(整數) | 正值在下載的 PNG 中將陰影往下移;負值將陰影往上移。 |
| 模糊半徑 | 0 到 250 像素(整數) | 數值越高,陰影邊緣越柔和;0 會產生硬邊的位移陰影。 |
| 不透明度 | 0 到 100%(整數百分比) | 控制陰影色彩與其後方內容混合的程度。 |
| 陰影色彩 | 六位數十六進位(例如 #000000) | 決定陰影的精確色調;僅接受精確輸入。 |
整數輸入會在陰影渲染之前進行驗證,因此非整數或超出範圍的值會被拒絕,而不是被悄悄四捨五入。來源檔案必須是瀏覽器可解碼的 JPG、PNG 或 WebP 檔案,且大小不得超過 25 MiB。在配置任何畫布之前,來源尺寸與展開後的輸出尺寸都會對照網站設定的畫布上限進行檢查,因此無效的類型、空白的檔案、解碼後過大的圖片、不可能的輸出尺寸、解碼錯誤,以及 PNG 編碼失敗,全都會以可見的錯誤顯示出來,而不是產生一個損壞的檔案。
如何為圖片加上陰影
- 選擇一個符合顯示檔案大小與像素限制的本地 JPG、PNG 或 WebP。檔案會在目前的瀏覽器分頁中解碼;不會上傳任何內容。
- 以整數像素輸入水平與垂直位移、設定模糊半徑、選擇不透明度百分比,並提供一個六位數十六進位色彩作為陰影。
- 選擇「加上陰影」。瀏覽器會將來源繪製兩次到一張展開的畫布上,並回報結果的新尺寸與編碼後的大小。
- 確認展開後的寬度與高度,確保陰影不會在原始圖片的邊緣被裁切,然後下載 PNG。檔名衍生自來源,例如 portrait-shadow.png。
實際範例:展開後的畫布尺寸
考慮一個 40 乘 20 像素的來源,右側位移 8 像素、向上位移 4 像素,模糊為 6 像素。每一邊會保留兩倍的模糊半徑,因此左、右、上、下各有 12 像素的邊距。右側位移會在右邊再增加 8 像素的邊距,而向上的位移會在上方再增加 4 像素的邊距。
寬度計算:40 + 12(左)+ 12(右基底)+ 8(右位移)= 72 像素。 高度計算:20 + 12(上基底)+ 4(上位移)+ 12(下)= 48 像素。
接著會把來源圖片定位在這個 72 乘 48 的區域內,讓產生的陰影完整落在新畫布中,而不是在原本的 40 乘 20 邊界處被裁掉。這就是工具在配置輸出畫布之前內部執行的相同計算,因此任何讀者都可以在按下「加上陰影」之前,用同一公式預測出精確的下載尺寸。
輸出格式與透明度
下載的檔案永遠是 PNG。之所以選擇 PNG,是因為陰影通常需要在原始矩形圖片之外有透明像素,而 PNG 是 JPG、PNG 與 WebP 三者之中唯一能保留 alpha 通道的輸出格式。頁面上的預覽可能會縮小以符合版面配置,但實際下載的檔案會保持從來源尺寸與陰影設定計算出的自然輸出解析度,而不是螢幕上的預覽大小。
如果來源已經是透明 PNG,輸出中的透明區域會保持透明,只有來源本身的 alpha 產生陰影的位置例外。JPG 與 WebP 來源會解碼為瀏覽器中的像素,因此它們原本的壓縮位元組與中繼資料不會被帶到下載的 PNG 中。結果會回報精確的展開寬度與高度,以及編碼後的檔案大小,讓你可以清楚看到實際產生了什麼。變更來源或任何設定會讓舊的結果失效,並撤銷其暫存的下載網址,因此絕不會不小心下載到過期的預覽。
這個工具適合的情境
- 需要快速加上可控點陣圖陰影的模型圖、商品縮圖與貼圖。
- 需要在平坦背景上呈現細微浮起感的網頁圖示與 UI 素材。
- 需要柔和陰影讓主題與畫布區隔開的社群與市集圖片。
- 任何希望圖片保留在自己的裝置上、而不是送到遠端圖片服務的工作流程。
由於每一步解碼、繪製與編碼都在目前的瀏覽器分頁內進行,圖片永遠不會離開你的裝置,這也讓這個工具適合用來處理私人素材。
這個工具刻意不做的事
Canvas 的陰影模糊屬於瀏覽器的渲染效果,而不是印刷打樣的量測值,因此精確的柔邊像素在不同瀏覽器引擎之間可能會略有差異。這個工具不宣稱與 CSS box-shadow 位元級等價、不會加上邊框、不會移除背景、不會偵測主體、不會產生透視地板陰影,也不會模擬攝影棚燈光。它是為了直接、可預測畫布邊界的點陣圖陰影與本機處理所打造。如果同時需要邊框,可以把產生的 PNG 接著送進 為圖片加上邊框 工具;如果需要更小的檔案以便上傳,則可以把同一張 PNG 送進 圖片壓縮工具。
取得可預測結果的訣竅
如果目標是細微的浮起效果,從低模糊與低不透明度開始;想要更戲劇化的效果時,兩者一起調高。以接近黑色的十六進位色彩(例如 #000000)、40 到 60 百分比的不透明度、8 到 16 像素的模糊,以及一個小幅的向下位移,是縮圖可靠且通用的預設值。若想要漂浮貼圖的感覺,可以提高模糊並使用稍微淺一點的色彩,讓陰影不會看起來像是主體的硬邊複本。由於畫布在每一邊都會放大,下載的 PNG 永遠會比來源圖片大,這就是讓陰影留在圖片內、而不是被原本邊界裁切所必須取捨的代價。
如果你正在比較不同做法,在不上傳圖片的情況下為圖片加上陰影 對此有詳細說明。
如果你正在比較不同做法,像 Canva 一樣在瀏覽器中為圖片加上陰影 對此有詳細說明。