你可以不用開啟Adobe Illustrator，就為一張圖片加上陰影——只要使用一個瀏覽器工具，輸入四個整數值：水平偏移、垂直偏移、模糊半徑，以及不透明度百分比，再加上一組六位數的十六進位色碼，就能輸出一張透明PNG，其尺寸會依照每一側兩倍模糊值，再加上受影響那一側的絕對方向偏移量來擴大。解碼、繪製、編碼、預覽和產生下載連結，全部都在目前的瀏覽器分頁中完成，來源檔案永遠不會被傳送到遠端伺服器。結果是一個畫在透明背景上的點陣化陰影，適合用在示意圖、縮圖、貼紙，以及類似的固定素材上，而擴展後畫布的運算方式是決定性的，因此你在點擊執行按鈕之前，就能預測出最終的像素尺寸。
Adobe Illustrator的「效果 > 風格化 > 製作陰影」選單，提供了一組非常相似的控制項。這個以瀏覽器為基礎的為圖片加上陰影工具，對應了同樣的四個控制項——偏移、模糊、不透明度和顏色——並把它們打包成一個只需要在單一分頁中完成的工作流程，這也是為什麼許多搜尋Illustrator解決方案的讀者，最後反而用了這個工具。如果底層真正的需求是「我想在圖片後面加上一個可控制的陰影，並且想要一張可以直接放進其他合成作品的透明PNG」，那麼瀏覽器這條路，就省去了安裝需求、授權相依性，以及在「外觀」效果面板中來回操作的麻煩。
Illustrator陰影功能的瀏覽器替代方案
Illustrator把陰影套用成外觀屬性上的一種向量效果，這代表這個陰影在任何匯出尺寸下，都能重新乾淨地算繪出來。這個瀏覽器工具產生的，則是透過Canvas陰影算繪管線繪製出的點陣化陰影（底層屬性可參見MDN — Canvas shadowBlur），這代表精確的柔化像素在不同瀏覽器引擎之間可能會略有差異，而且它並不是印刷打樣等級的量測。對於示意圖、社群貼文、應用程式商店截圖、網頁縮圖、貼紙匯出，以及任何最終格式就是透明PNG的場合來說，這個點陣輸出正好就是下游最終會拿到的東西，而且在一般的螢幕尺寸下，這種差異根本看不出來。
這種瀏覽器做法，還有一點和Illustrator明顯不同：它完全不會碰觸來源檔案。原始的JPG、PNG或WebP檔案會留在磁碟上，然後產生一份根據來源命名的新PNG，例如portrait-shadow.png。這種區隔讓你能輕鬆反覆調整設定——改變偏移量、改變模糊值、重新產生——而不必擔心覆蓋掉進行中的工作，或牽動來源素材的版本紀錄。
Illustrator的陰影工作流程
Illustrator確實內建了一個陰影效果，這也是讀者會搜尋「在illustrator中為圖片加上陰影」工作流程的明顯原因。標準的步驟是：用選取工具在工作區上選取放置或內嵌的圖片，開啟「效果」選單，選擇「風格化」，再選擇「製作陰影」。在「製作陰影」對話框中，透過預覽色塊設定模式、不透明度、X軸偏移、Y軸偏移、模糊，以及顏色，接著點擊「確定」，把這個效果套用成一個即時的外觀屬性。如果想把陰影固化進美術稿本身，而不是保留成一個即時效果，就選擇「物件 > 擴充外觀」。接著透過「資源匯出」或「檔案 > 匯出」，寫出一張把陰影攤平進像素中的透明PNG。
對於最終目的地是一張透明PNG的單一點陣圖片來說，Illustrator效果那種向量重新算繪的優勢，很少真的派得上用場，而且這個工作流程還預設你擁有授權、有安裝桌面軟體，以及有時間反覆來回處理檔案。這個瀏覽器版的「為圖片加上陰影」工具，在單一分頁中涵蓋了同樣的四個控制項（偏移、模糊、不透明度、顏色），不需要安裝，並輸出一張以來源檔案命名的透明PNG。
這個工具處理什麼、又略過了什麼
這個工具的範圍是刻意設計得很窄的。它會先用選定的Canvas陰影狀態把來源圖片畫一次，再不帶陰影地把來源圖片畫第二次，讓可見的前景像素保持清晰，而不會被半透明的陰影處理效果柔化掉。PNG來源中的透明區域，在輸出結果中依然保持透明，除非來源本身的alpha值在那個位置產生了陰影像素。JPG和WebP來源會被解碼成瀏覽器像素，因此它們原本的壓縮位元組和中繼資料，不會被保留在輸出的PNG中。
這個工具刻意不做的事：它不宣稱與CSS box-shadow逐位元組完全一致，它不會加上邊框，它不會移除背景，它不會偵測主體，它不會製作透視地板陰影，它也不會模擬攝影棚打光。它是一個直截了當的、畫在透明畫布上的點陣陰影。若要為同類本機來源加上邊框，請參見如何不用Illustrator為圖片加上邊框。
在你的瀏覽器中加上陰影
- 在你的瀏覽器分頁中開啟「為圖片加上陰影」。請確認你打算載入的檔案是瀏覽器可解碼的JPG、PNG或WebP，且大小不超過25 MiB。
- 使用畫面上顯示的檔案選取器，選擇本機檔案。這個工具會從你的裝置讀取檔案並在本機解碼；不會上傳任何內容到任何伺服器。
- 輸入水平偏移量，數值為-500到500像素之間的整數。正值會把陰影往右移；負值會把陰影往左移。
- 輸入垂直偏移量，數值為-500到500像素之間的整數。正值會讓陰影在下載出來的圖片中往下移；負值會往上移。
- 設定模糊半徑，數值為0到250像素之間的整數。模糊效果是由瀏覽器的Canvas陰影算繪器套用的，柔化程度在不同引擎之間可能會略有差異。
- 設定不透明度，數值為0到100之間的整數百分比。數值越高，陰影就會越深、放在任何背景上都越明顯。
- 輸入陰影顏色，格式為六位數的十六進位數值，例如純黑色000000，或接近黑色的1a1a1a。這個色碼字串本身不會混入任何alpha通道。
- 點選「加上陰影」，接著確認畫面上顯示的擴展後寬度與高度，這樣你在下載之前就能知道最終的畫布尺寸。
- 點選下載連結。輸出的PNG會以來源檔案命名，並在後面加上-shadow，例如portrait-shadow.png。
- 如果你之後更改來源檔案或任何設定，舊的結果就會失效，其暫時性的下載網址也會被撤銷，因此請重新執行一次「加上陰影」，以取得全新的PNG。
一眼看懂陰影控制項的範圍
每一個控制項不是整數，就是六位數的十六進位字串，這讓輸入結果變得可預測，也讓輸出畫布的尺寸可以手動算出來。下表列出經過驗證的範圍，以及每個控制項在下載出來的圖片中所帶來的方向性效果。
| 控制項 | 接受的輸入 | 範圍 | 對輸出結果的影響 |
|---|---|---|---|
| 水平偏移 | 整數像素 | -500到500 | 正值會把陰影往右移；負值會往左移。 |
| 垂直偏移 | 整數像素 | -500到500 | 正值會讓陰影在輸出結果中往下移；負值會往上移。 |
| 模糊半徑 | 整數像素 | 0到250 | 由Canvas的shadowBlur套用；精確的柔化程度在不同瀏覽器引擎之間可能會略有差異。 |
| 不透明度 | 整數百分比 | 0到100 | 數值越高，透明畫布上的陰影就越深。 |
| 顏色 | 六位數十六進位色碼 | 000000到ffffff | 完全依照輸入值；alpha值則由不透明度欄位另外提供。 |
為什麼輸出的畫布會比來源圖片大
當你第一次為圖片加上陰影時，常見的一個意外，是為什麼下載出來的PNG，寬度和高度會比來源檔案多出幾十個像素。畫布之所以刻意放大，是為了避免陰影在原始矩形邊緣被裁切掉。這個保留空間的規則是：在每一側都保留兩倍的模糊值，然後在陰影落下的那一側，再加上絕對值的方向性偏移量。原始圖片會被放置在這個擴展區域內部，讓可見的來源像素永遠不會與陰影需要存在的位置重疊。
實作範例。假設有一張40乘20的來源圖片，水平偏移為+8（陰影落在右側）、垂直偏移為-4（陰影落在上方），模糊值為6像素。把這個規則套用到每一側：
- 左邊界 = 2 × 6 = 12像素
- 右邊界 = 2 × 6 + 8 = 20像素
- 上邊界 = 2 × 6 + |-4| = 16像素
- 下邊界 = 2 × 6 = 12像素
最終輸出寬度 = 40 + 12 + 20 = 72像素。最終輸出高度 = 20 + 16 + 12 = 48像素。原始的40乘20圖片，會放置在這個72乘48的畫布內部，讓陰影可以自由地在每一個邊緣柔化開來。
如果你想反轉方向——例如把陰影推向左下方——就使用負的水平偏移和正的垂直偏移。運算方式完全相同；加到受影響那一側的，是偏移量的絕對值。負的偏移量，同樣也會讓畫布在相反的那一側變寬，因為絕對值的方向性偏移量仍然需要被保留，這也是為什麼一個往上落的陰影，在柔化開來之後，仍然可能延伸到原始圖片下方的原因。
錯誤與畫布邊界檢查
這個工具在配置輸出畫布之前，會執行一系列檢查。無效的檔案類型、空檔案、解碼後過大的圖片、不可能達成的輸出尺寸、解碼錯誤、缺少Canvas支援，以及PNG編碼失敗，每一種情況都會產生一則明確可見的錯誤訊息，而不是靜默失敗。這個畫布邊界預算，會同時對照來源與擴展後的輸出結果進行檢查，因此即使來源本身遠低於檔案大小上限，一張25 MiB的圖片搭配極端的偏移量和模糊值，仍然有可能被拒絕。如果你看到錯誤訊息，請降低模糊半徑、縮小絕對偏移量，或改用一張較小的來源圖片再試一次。
預覽窗格可能會被縮小以配合頁面顯示，但下載出來的PNG，會保留依照你的來源與陰影設定所計算出來的原始輸出解析度。這種區隔讓你可以在舒適的縮放比例下預覽一張2000像素寬的合成作品，同時仍然能匯出運算所承諾的每一個像素。更改來源或任何設定，都會讓舊的結果失效，並撤銷它暫時性的Object URL，因此在你重新產生結果之後，先前的下載連結就無法繼續使用。
這種做法什麼時候合理
當你的目標是在一張透明PNG上做出乾淨的點陣化陰影，而你又不想開啟Illustrator、Photoshop，或任何其他編輯器時，就適合使用這個工具。它很適合用在把陰影放在一張去背PNG後方的產品示意圖，適合用在讓主體更突出的貼紙風格社群圖像，適合用在每個裝置外框下方都需要一致陰影的應用程式商店截圖，也適合用在人像下方加一層柔和模糊、讓主體與雜亂背景分離的縮圖處理。因為檔案完全不會離開你的瀏覽器，出於隱私或政策考量，不想把圖片上傳到第三方伺服器時，這也是一個合理的選擇。如果你需要透視地板陰影、彩色攝影棚柔光箱式的光暈、能沿著複雜去背形狀走的邊框，或是能在任何匯出尺寸下重新算繪的向量效果，就請留在Illustrator裡處理。但如果你需要的是一張帶有可控制陰影的透明PNG，而且手邊已經有一份本機的JPG、PNG或WebP檔案，這條瀏覽器路徑就能在不啟動任何應用程式的情況下達成目標。
想了解更深入的內容，請參見在瀏覽器中為Illustrator建立圖片佔位圖。