在 CSS 中為圖片加上陰影通常會使用兩個屬性：box-shadow 會在元素的邊界框周圍繪製矩形陰影，而 filter: drop-shadow() 則會沿著透明 PNG 的可見輪廓產生陰影。box-shadow 屬性簡單且支援度廣，但它會忽略透明度——使用 box-shadow 繪製的透明 PNG 會產生一個正方形的陰影外框，看起來像多了一個邊框。filter: drop-shadow() 函式會讀取圖片的 alpha 通道，並建立一個符合實際圖案形狀的陰影，這通常才是設計師想要的。這兩種方式都完全在瀏覽器的渲染層中運作；陰影會在每次頁面載入時重新計算，並不會寫入圖片檔案本身。當你需要將陰影烘焙到像素中——例如縮圖、模型圖、貼紙，或任何你想要用電子郵件寄送或上傳的檔案——就必須將效果渲染到點陣圖中。為圖片加上陰影 工具正是做這件事：它會接收本機的 JPG、PNG 或 WebP，套用 Canvas 渲染的投影陰影，並輸出一個已經包含陰影的透明 PNG。
在 CSS 中為圖片加上陰影的方法
開發人員想要在圖片下方加上陰影時，通常會使用以下兩種 CSS 屬性之一。兩者處理透明度的方式不同，且各自在渲染管線的不同層級運作。
兩者中較簡單的是 box-shadow。它將圖片視為一般的方塊，並在指定的偏移位置加上陰影，可指定模糊半徑和顏色。瀏覽器會使用由元素的寬度和高度定義的矩形來繪製陰影——而不是使用圖片的像素。這種行為對於實心照片來說沒問題，但當來源是具有剪裁邊緣的透明 PNG 時就會出問題，因為陰影看起來會像一個矩形外框，而不是沿著剪裁形狀的輪廓。
另一個選項是使用帶有 drop-shadow() 函式的 filter 屬性。根據 CSS 規範，filter: drop-shadow() 會產生一個使用元素 alpha 通道作為形狀的陰影，因此具有曲線輪廓的透明 PNG 會得到一個與輪廓相符的陰影。其語法與 box-shadow 類似：一個 x 偏移、一個 y 偏移、一個選用的模糊半徑，以及一個顏色。drop-shadow() 在所有現代瀏覽器中都受到支援，包括 Safari、Chrome、Firefox 和 Edge。
這兩個屬性都是在頁面的渲染管線中套用陰影。移除 CSS 就會移除陰影。儲存螢幕截圖或將圖片複製到剪貼簿，並不會把陰影帶到儲存的檔案中。
box-shadow vs filter: drop-shadow
| 面向 | box-shadow | filter: drop-shadow() |
|---|---|---|
| 是否沿著透明度 | 否 — 陰影使用元素方塊 | 是 — 陰影使用 alpha 通道 |
| 最適用於 | 實心照片、圖示、矩形圖片 | 透明 PNG、剪裁圖形、標誌 |
| 語法 | box-shadow: 4px 6px 12px rgba(0,0,0,0.4); | filter: drop-shadow(4px 6px 12px rgba(0,0,0,0.4)); |
| 擴散半徑 | 支援作為第四個值 | 不支援 |
| 多個陰影 | 支援以逗號分隔的清單 | 支援以串接的 filter 值 |
| 硬體加速 | 通常是 | 通常是 |
| 是否保存在儲存的檔案中 | 否 | 否 |
這兩個屬性在大多數基本用途上重疊，但 drop-shadow() 對 alpha 的感知行為使它成為透明圖案時的預設選擇。如果你在為方形產品照片設定樣式，兩個屬性都可以使用；如果你在為帶有柔和外框的標誌設定樣式，drop-shadow() 幾乎總是正確的選擇。
CSS 陰影的不足之處
CSS 陰影在網頁中很強大，但它們有幾個實際的限制，這會讓設計師尋求點陣圖形式的替代方案。
第一個限制是持續性。由 box-shadow 或 filter: drop-shadow() 產生的陰影存在於樣式表中，而不是圖片檔案中。將圖片複製到 Word 文件、電子郵件草稿、簡報或不會重新評估 CSS 的設計工具中，將會產生一張沒有陰影的圖片。任何需要讓陰影跟著檔案一起傳遞的情境，都必須將陰影烘焙到點陣圖中。
第二個限制是動畫和編輯控制。CSS 陰影會在每次頁面渲染時重新計算，這對 hover 效果來說很好，但當你想要一個可以在向量工具中調整的靜態檔案時就沒什麼幫助。一旦頁面關閉，用來製作陰影的設定就不會與圖片一起儲存。
第三個限制是引擎層級的差異。CSS 陰影的渲染取決於訪客的瀏覽器引擎。不同的引擎可能會以稍微不同的方式對邊緣進行反鋸齒處理，特別是在非常小的模糊半徑下。對於需要像素級精度的模型圖或印刷預覽來說，這種差異可能會造成問題。
第四個限制是伺服器端的重複使用。如果你想將同一張帶陰影的圖片送到內容管理系統、行銷電子郵件或不執行你 CSS 的第三方平台，陰影將會遺失。解決方法就是將陰影寫入像素。
何時需要將陰影烘焙到檔案中
在幾個實際情境中，點陣化陰影才是正確答案，而不是 CSS 規則。
- 貼紙和疊加圖層：帶有柔和投影陰影的透明 PNG 放到背景上時，看起來就像實體物件。當 PNG 就是最終交付物時，CSS 幫不上忙。
- 模型圖和產品卡片：線上商店常常希望在多個主題上或在無法解析 CSS 的應用程式中，呈現同一張帶陰影的圖片。只要將陰影烘焙一次，每個消費者看到的都是相同的外觀。
- 縮圖和社群媒體圖片：縮圖下方的扁平陰影在動態消息和預覽中，比沒有視覺重量的無陰影圖片更易閱讀。
- 文件和簡報：PowerPoint、Keynote、Google Slides 和大多數電子郵件用戶端會完全忽略 box-shadow 和 drop-shadow()。陰影必須存在於圖片內部。
對於這些用途，最快的方法就是對圖片本身套用陰影，然後將結果下載為新的 PNG。
如何在瀏覽器中為圖片加上陰影
- 在瀏覽器中開啟「為圖片加上陰影」工具。整個過程都在你的本機上執行，因此來源檔案永遠不會被上傳。
- 使用檔案選擇器從你的電腦中選擇本機的 JPG、PNG 或 WebP。該工具接受瀏覽器可解碼的 JPG、PNG 或 WebP 檔案，最大可達 25 MiB，並且在開始任何像素處理之前，會將來源及其預計的擴展輸出都與 Canvas 預算進行檢查。
- 輸入介於 -500 到 500 之間的整數像素水平偏移和垂直偏移。正值會將陰影向右移動；負值會將其向左移動。正值會將陰影向下移動；負值會將其在下載的圖片中向上移動。
- 設定介於 0 到 250 之間的整數像素模糊半徑。值越大，陰影的邊緣越柔和。
- 選擇介於 0 到 100 之間的整數百分比不透明度，並使用精確的六位數十六進位值來指定陰影顏色，例如 #000000 代表純黑，或 #1F2937 代表較柔和的深灰色。
- 選擇Add shadow。瀏覽器會解碼來源，使用所選的 Canvas 陰影狀態繪製一次，再在不套用陰影的情況下繪製一次，以保持來源像素清晰銳利，最後將結果編碼為 PNG。
- 確認回報的擴展寬度和高度。由於 Canvas 在每一側保留了兩倍模糊值的邊距，並在受影響的一側加上絕對方向偏移，因此輸出尺寸會大於來源。
- 選擇Download PNG。檔案以來源命名，例如 portrait-shadow.png，並且先前的暫存下載連結會在新的渲染取代它時被撤銷。
為何下載的 PNG 比來源更大
該工具並不是簡單地將陰影貼在原始圖片後面——它會配置一個更大的 Canvas，這樣模糊和方向偏移就不會在原始邊緣處被裁剪。計算公式會在每一側保留兩倍模糊值的邊距，並且只在受影響的一側加上絕對方向偏移。
考慮一張 40 乘 20 的來源圖片，右偏移 8 像素、上偏移 4 像素，模糊為 6 像素。
- 左邊距 = 2 × 模糊 = 2 × 6 = 12 px
- 右邊距 = 2 × 模糊 + |水平偏移| = 12 + 8 = 20 px
- 上邊距 = 2 × 模糊 + |垂直偏移| = 12 + 4 = 16 px（因為偏移是向上的）
- 下邊距 = 2 × 模糊 = 12 px
將這些代入寬度公式：12 + 40 + 20 = 72 像素。代入高度公式：16 + 20 + 12 = 48 像素。來源周圍增加的邊距總計為 12 + 20 + 16 + 12 = 60 個額外像素，這正是防止模糊和偏移在原始邊緣處被靜默裁剪的關鍵。
陰影設定參考
| 設定 | 可接受的值 | 行為 |
|---|---|---|
| 水平偏移 | -500 到 500，整數像素 | 正值將陰影向右移動，負值將其向左移動 |
| 垂直偏移 | -500 到 500，整數像素 | 正值將陰影向下移動，負值將其向上移動 |
| 模糊半徑 | 0 到 250，整數像素 | 值越高，陰影邊緣越柔和 |
| 不透明度 | 0 到 100，整數百分比 | 作為陰影顏色的 alpha 套用 |
| 陰影顏色 | 六位數十六進位（例如 #1F2937） | 精確值，不使用簡寫或具名顏色 |
| 來源檔案 | JPG、PNG 或 WebP，最大 25 MiB | 解碼為像素；不保留原始位元組 |
| 輸出 | 以來源命名的透明 PNG | 檔案命名格式：filename-shadow.png |
這些範圍會在渲染開始前通過驗證強制執行。無效的偏移、無效的顏色字串、不支援的檔案類型、超過大小限制的檔案，或會超出 Canvas 預算的結果，都會產生可見的錯誤，而不是損壞的 PNG。根據 MDN 關於 shadowBlur 的文件，瀏覽器的 Canvas 陰影是一種渲染效果，而非印刷預處理測量值，因此精確的羽化像素在不同瀏覽器引擎之間可能會略有不同。
Privacy and Local Processing
For users who care about where their images go, every step of the pipeline runs inside the browser tab. According to the Canvas API documentation, the browser can decode images, draw them with a shadow state, and encode a new bitmap without contacting a server. The Add Shadow to Image tool uses that local pipeline exclusively.
No upload happens when the file picker is opened, no upload happens during the render, and the download link is created from a temporary object URL inside the page. Changing the source or any setting invalidates the old result and revokes the previous object URL, so there is no leftover temporary data sitting in memory. JPG and WebP sources are decoded to browser pixels, which means their original compression bytes and any embedded metadata are not carried into the output PNG — a useful side benefit for users who do not want EXIF data or color profiles leaking out alongside the new image.
For a deeper look, see Add Shadow to an Image Without Opening Illustrator.
For a deeper look, see Add a Photoshop-Style Shadow to an Image Locally.