A drop shadow can be added to a JPG, PNG, or WebP entirely inside the current browser tab using the Add Shadow to Image tool, which decodes the source file, draws it onto an enlarged canvas with the browser's shadow renderer, and exports a transparent PNG without ever sending the picture to a remote server. The source picture is decoded once into browser pixels, then rendered with horizontal and vertical offsets, a blur radius, an opacity percentage, and an exact six-digit hex color, and the canvas is intentionally larger than the source so the shadow is not clipped at the original edge. After the source is drawn once with the shadow state active, it is drawn a second time without a shadow so the visible foreground stays crisp instead of being softened by its own translucent shadow pixels. Because that second draw clears the shadow state, the original image is preserved on top of its own shadow rather than being washed out by translucent color. The output is always a PNG, named after the source file (for example portrait-shadow.png), and includes the exact expanded width and height plus the encoded size.
How a drop shadow is rendered in the browser
The shadow effect in this tool comes from the browser's Canvas API rather than from a pre-rendered effect or a CSS layer. The Canvas 2D context accepts four shadow properties: an X offset, a Y offset, a blur radius, and a color, and these values are passed in directly from the validated form controls. When the source picture is drawn with those properties set, the browser paints a colored, offset, blurred copy of every opaque pixel before the picture itself is painted on top.
The output canvas is deliberately enlarged before either draw happens. The expansion follows a fixed rule: the canvas adds twice the blur radius on every side and then adds the absolute directional offset on the side it points toward. That reserved room is what prevents a normal shadow from being silently clipped at the old rectangular edge of the source image. After the two draw passes are complete, the canvas is encoded as a PNG so the empty margin around the source remains fully transparent in the downloaded file. According to the MDN documentation on the Canvas shadowBlur property, the blur radius is interpreted by the underlying browser engine, which is why exact feather pixels can vary slightly between rendering environments.
Controls you can adjust
| Control | Accepted values | What it does |
|---|---|---|
| Horizontal offset | -500 to 500 pixels (whole numbers) | Positive shifts the shadow right; negative shifts it left. |
| Vertical offset | -500 to 500 pixels (whole numbers) | Positive shifts the shadow down in the downloaded PNG; negative shifts it up. |
| Blur radius | 0 to 250 pixels (whole numbers) | Higher values make the shadow edge softer; 0 produces a hard offset shadow. |
| Opacity | 0 to 100% (whole percentages) | Controls how strongly the shadow color blends with whatever sits behind it. |
| Shadow color | Six-digit hex (for example #000000) | Determines the exact tint of the shadow; exact input only. |
Whole-number inputs are validated before the shadow is rendered, so non-integer or out-of-range values are rejected rather than silently rounded. Source files must be browser-decodable JPG, PNG, or WebP files no larger than 25 MiB. The source dimensions and the expanded output dimensions are both checked against the site's bounded canvas budget before any canvas is allocated, so invalid types, empty files, oversized decoded images, impossible output dimensions, decode errors, and PNG encoding failures all surface as a visible error instead of producing a broken file.
How to add a shadow to an image
- Choose a local JPG, PNG, or WebP that fits within the displayed file size and pixel limits. The file is decoded in the current browser tab; nothing is uploaded.
- Enter horizontal and vertical offsets as whole pixels, set a blur radius, choose an opacity percentage, and provide a six-digit hex color for the shadow.
- Select Add shadow. The browser draws the source twice onto an expanded canvas and reports the new dimensions and encoded size of the result.
- Verify the expanded width and height so the shadow is not clipped at the edge of the original picture, then download the PNG. The filename is derived from the source, for example portrait-shadow.png.
Worked example: expanded canvas dimensions
Consider a 40 by 20 pixel source with an 8-pixel right offset, a 4-pixel upward offset, and 6 pixels of blur. Each side reserves twice the blur radius, so 12 pixels of margin on the left, right, top, and bottom. The right offset adds another 8 pixels of margin on the right, and the upward offset adds another 4 pixels of margin on the top.
Width calculation: 40 + 12 (left) + 12 (right base) + 8 (right offset) = 72 pixels. Height calculation: 20 + 12 (top base) + 4 (top offset) + 12 (bottom) = 48 pixels.
The source picture is then positioned inside that 72 by 48 area so the generated shadow falls fully within the new canvas instead of being cropped at the old 40 by 20 border. That is the same arithmetic the tool runs internally before allocating the output canvas, so any reader can use the same formula to predict the exact download dimensions before clicking Add shadow.
Output format and transparency
The downloaded file is always a PNG. PNG is used because a drop shadow normally needs transparent pixels outside the original rectangular image, and PNG is the only output format among JPG, PNG, and WebP that preserves alpha. The preview on the page may be scaled down to fit the layout, but the actual download keeps the natural output resolution calculated from the source dimensions and the shadow settings, not the on-screen preview size.
If the source is already a transparent PNG, the transparent areas stay transparent in the output except where the source alpha itself produces a shadow. JPG and WebP sources are decoded into browser pixels, so their original compression bytes and metadata are not carried over into the downloaded PNG. The result reports the exact expanded width and height plus the encoded file size so you can see exactly what was produced. Changing the source or any setting invalidates the old result and revokes its temporary download URL, so a stale preview can never be downloaded by mistake.
When this tool is the right fit
- Mockups, product thumbnails, and stickers where a controlled raster shadow is needed quickly.
- Web icons and UI fixtures that need a subtle lift against a flat background.
- Social and marketplace images where a soft drop shadow helps a subject separate from the canvas.
- Any workflow where the picture should stay on your device rather than being sent to a remote image service.
Because every decode, draw, and encode step happens inside the current browser tab, the picture never leaves your device, which makes the tool suitable for working with private assets.
What the tool deliberately does not do
Canvas shadow blur is a browser rendering effect rather than a print prepress measurement, so exact feather pixels can vary slightly between browser engines. The tool does not claim byte-for-byte equivalence with CSS box-shadow, does not add a border, does not remove a background, does not detect the subject, does not create a perspective floor shadow, and does not simulate studio lighting. It is built for straightforward raster drop shadows with predictable canvas bounds and local processing. If a border is also needed, the resulting PNG can be passed to the Add Border to Image tool afterward; if a smaller file is required for upload, the same PNG can be run through the Image Compressor.
Tips for predictable results
Start with low blur and low opacity when the goal is a subtle lift, and increase both together for a more dramatic effect. A near-black hex like #000000 at 40 to 60 percent opacity with a blur of 8 to 16 pixels and a small downward offset is a dependable default for thumbnails. For a floating sticker look, raise blur and use a slightly lighter color so the shadow does not read as a hard duplicate of the subject. Because the canvas grows on every side, the downloaded PNG will always be larger than the source picture, which is the trade-off that keeps the shadow inside the image instead of being clipped at the original border.