A drop shadow is a soft or hard offset silhouette drawn behind an image so the foreground appears to lift away from its background, and the most reliable way to add a controlled drop shadow to a JPG, PNG, or WebP without sending pixels to a remote server is to render it locally in your own browser through the HTML Canvas shadow renderer. The browser's Canvas API exposes shadowBlur, shadowOffsetX, shadowOffsetY, shadowColor, and globalAlpha as independent properties, so each one — including negative offsets that move the shadow left or upward — can be set with a whole number and validated before drawing begins. The Add Shadow to Image tool wraps that exact Canvas pipeline: it accepts one local image up to 25 MiB, draws the source once with the chosen shadow state and once without it so the foreground stays crisp, then encodes a PNG whose canvas is deliberately larger than the source so the shadow is never clipped at the original edges.
What Adding a Shadow to an Image Actually Does
A drop shadow gives a flat image the illusion of depth. A photograph of a pair of sneakers laid on a white background, a product cutout on an e-commerce card, a sticker exported for a printable sheet, or a thumbnail placed inside a hero banner all look more grounded once a soft offset silhouette sits a few pixels behind them. Most image editors offer a shadow feature, but the implementation matters. A generative AI shadow generator may invent highlights, contact patches, or floor reflections that look impressive yet drift away from the source pixels; a manual Canvas renderer produces the same shadow for the same input every time, which is what you want for repeatable mockups and consistent thumbnail sets. If your goal is a straightforward raster drop shadow — predictable geometry, transparent background, no surprises — a deterministic browser renderer is usually the simpler choice.
What Each Shadow Control Means
Five inputs drive the shadow. Together they describe the silhouette you want to draw behind the source image. All five values are validated before any pixels are drawn, so an out-of-range value produces a visible error rather than a corrupted PNG.
| Control | Accepted range | Behavior |
|---|---|---|
| Horizontal offset | -500 to 500 whole pixels | Positive moves the shadow right; negative moves it left. |
| Vertical offset | -500 to 500 whole pixels | Positive moves the shadow down in the output; negative moves it up. |
| Blur radius | 0 to 250 whole pixels | 0 produces a hard offset; larger values soften the shadow edge. |
| Opacity | 0 to 100% whole percent | 100 is a fully opaque shadow; 0 hides the shadow entirely. |
| Color | Six-digit hex only | Exact color, for example #000000 for black or #1F2937 for slate. |
These constraints map directly to the Canvas renderer. shadowBlur takes an integer radius, shadowOffsetX and shadowOffsetY take integer pixel offsets, and shadowColor parses a CSS color string. The tool does not accept shorthand hex like #000 or named colors, so the value you enter is the value the browser draws.
How to Add a Shadow to an Image in Your Browser
- Open the Add Shadow to Image tool and choose a local JPG, PNG, or WebP from your device. The file must be browser-decodable and no larger than 25 MiB, and its decoded dimensions must fit within the tool's bounded canvas budget.
- Enter the horizontal and vertical offsets in whole pixels from -500 to 500. Positive horizontal moves the shadow right, negative horizontal moves it left; positive vertical moves the shadow down in the output, negative vertical moves it up.
- Enter a blur radius as a whole number from 0 to 250, an opacity as a whole percentage from 0 to 100, and a six-digit hex color such as #000000.
- Select Add shadow. The tool reports the new expanded width and height, the encoded file size, and a preview of the result. The preview may be scaled down to fit the page, but the download keeps the natural output resolution.
- Download the resulting PNG. The file is named after the source, such as portrait-shadow.png. Changing the source or any setting invalidates the previous result and revokes its temporary download URL, so always download after you finish tweaking.
Why the Downloaded Image Is Larger Than the Source
A drop shadow needs room around the source to draw itself. The output canvas reserves twice the blur value on every side and then adds the absolute value of the directional offset on the affected side. The formula for each dimension is therefore:
output_width = source_width + (2 × blur) + (2 × blur) + |horizontal_offset| output_height = source_height + (2 × blur) + (2 × blur) + |vertical_offset|
Consider a 40 × 20 source with an 8-pixel right offset, a 4-pixel upward offset, and 6 pixels of blur:
- output_width = 40 + (2 × 6) + (2 × 6) + |8| = 40 + 12 + 12 + 8 = 72 pixels
- output_height = 20 + (2 × 6) + (2 × 6) + |−4| = 20 + 12 + 12 + 4 = 48 pixels
The downloaded PNG is therefore 72 × 48. The original 40 × 20 image sits inside that larger canvas, with 12 pixels of blur room on each horizontal side, 12 pixels of blur room on each vertical side, plus the offset itself on the direction you chose. This is why a negative vertical offset expands the canvas upward and a negative horizontal offset expands it leftward — the extra room has to live somewhere, and the tool places it on the side the shadow points toward. The original image is positioned inside the expanded area so a normal shadow is not silently cropped at the old image edge.
Local Processing Means Nothing Leaves Your Browser
All decoding, drawing, encoding, previewing, and download creation happen inside the current browser tab. The tool does not upload your image to a remote image service or send its pixels to a cloud AI model; the file you select is read by the browser's image decoder, drawn into a Canvas element, and re-encoded as a PNG without ever leaving your device. This matters for product photos that have not yet been published, internal mockups containing unfinished designs, and any image where pixel confidentiality is a real concern.
The download itself is a temporary object URL pointing at an in-memory blob. As soon as you change the source image or any shadow control, the previous result is invalidated and its URL revoked, so a stale preview cannot be downloaded after a re-run. The output filename is derived from the source name, which makes it easy to keep a working folder of shadowed variants without overwriting the originals.
AI Shadow Generators vs Local Canvas Rendering
Search results for adding a shadow to an image often surface AI image editors that promise one-click shadow effects, automatic subject detection, and studio-style lighting. Those tools run a generative model over your photo and produce a shadow that may include highlights, contact patches, or floor reflections that the original pixels did not contain. For product mockups, sticker sheets, and thumbnail sets where the same shadow needs to repeat predictably across many images, a deterministic Canvas renderer often makes more sense.
A local browser renderer gives you five direct controls — horizontal offset, vertical offset, blur radius, opacity, and color — and applies them the same way every time. The shadow does not invent geometry beyond what your offsets and blur specify, and the output PNG preserves the transparent background. If your goal is a clean rectangular drop shadow, that predictability is usually what you want. If your goal is a photorealistic shadow that bends around a subject, follows a light source, or simulates a contact patch on a floor, an AI image editor with a dedicated shadow tool is the better fit, accepting that the shadow will be generated rather than computed and that the pixels may be sent to a remote service.
Input Formats, Limits, and Errors
| Item | Limit or behavior |
|---|---|
| Accepted file types | Browser-decodable JPG, PNG, or WebP |
| Maximum file size | 25 MiB |
| Maximum source dimensions | Within the tool's bounded canvas budget, checked before allocation |
| Shadow offset range | -500 to 500 whole pixels per axis |
| Blur range | 0 to 250 whole pixels |
| Opacity range | 0 to 100% whole percent |
| Color format | Six-digit hex only; no shorthand, no named colors |
| Output format | PNG, named after the source (for example portrait-shadow.png) |
Anything outside these limits — an unsupported file type, an empty file, an oversized decoded image, an impossible output dimension, a decode error, missing Canvas support, or a PNG encoding failure — produces a visible error rather than a broken PNG. These checks run before any pixel is drawn, so a file that fails validation never consumes working memory or generates a partial result.
When a Simple Drop Shadow Is the Right Choice
A straight Canvas drop shadow works well for predictable design jobs. Common fits include e-commerce product cards where the same shadow angle needs to repeat across an entire catalog, sticker sheets where each sticker needs to lift off the printable background, social media thumbnails that sit inside a banner or article hero, presentation mockups that pair a logo with a soft contact shadow, and lightweight UI fixtures where a subtle 1–4 pixel blur is enough to separate an icon from a card.
The tool is deliberately limited. It does not detect the subject inside a photo, so a shadow that falls outside the bounding rectangle still respects the rectangular bounds of the source. It does not create a perspective floor shadow, simulate studio lighting, or generate a reflection, and it does not add a border or remove a background. Canvas shadow blur is a browser rendering effect rather than a print prepress measurement, so the exact feather pixels can vary slightly between Chrome, Firefox, and Safari, and the output is not promised to be byte-for-byte equivalent to a CSS box-shadow. JPG and WebP sources are decoded to browser pixels, so their original compression bytes and metadata are not retained in the output. If you need any of those features, a generative AI image editor with a shadow tool may be a better fit; if you need a fast, repeatable, deterministic drop shadow for everyday raster work, a local Canvas renderer is the practical choice.