A drop shadow is added to a photo by setting a horizontal offset, vertical offset, blur radius, opacity, and color on a browser-rendered copy of the image, then exporting the result as a transparent PNG that is larger than the original so the shadow is not clipped. The shadow is drawn by the browser's Canvas API after the source file is decoded locally; the photo never leaves the device. Because the output canvas is deliberately expanded, reserving twice the blur value on every edge plus the absolute directional offset on the affected side, the feathered edges of the shadow remain visible even when the offset pushes the shadow outward by hundreds of pixels. This makes a raster drop shadow practical for product photos, social thumbnails, sticker sheets, mockups, and any other fixture where a clean rectangular crop with a visible halo around the subject is the goal. Five inputs, namely offset X, offset Y, blur, opacity, and a six-digit hex color string, control the final shape, and canvas shadow blur is a browser rendering effect, so exact feather pixels can vary slightly between browser engines even when the same five inputs are used.
Why a Drop Shadow Matters for Photos
A drop shadow separates a subject from its background, mimics ambient occlusion, and adds depth to a flat image. On an e-commerce product page, a soft shadow under a chair photograph makes the chair appear to rest on the floor rather than float against the page. On a social thumbnail grid, uniform shadows tie separate images into a coherent set and let each photograph read as an object rather than a patch of pixels. On a sticker sheet, a thin offset shadow gives every sticker a tactile edge. In all of these cases the goal is the same: produce a transparent PNG with a soft, slightly offset halo around the visible foreground.
Photos rarely need elaborate shadows. A 6-to-12 pixel blur with an offset of 4-to-8 pixels in one direction usually produces a clean effect. The exact numbers depend on the source resolution, since a 600-pixel-wide product photo can carry a larger absolute blur than a 64-pixel icon, but the shape of the shadow scales predictably with those five inputs and the relationship between offset, blur, and canvas expansion stays constant at any size.
The Five Controls That Shape a Shadow
Every drop shadow produced by the Add Shadow to Image tool is described by five values. The table below lists each control, its allowed range, and what it does to the rendered output.
| Control | Allowed range | Effect on the rendered shadow |
|---|---|---|
| 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 | Softens the shadow edges; larger values produce a wider feather |
| Opacity | 0 to 100, whole percent | Controls how dark the shadow reads against whatever it falls on |
| Color | Six-digit hex (e.g. 000000) | Sets the shadow tint |
The tool validates each input before rendering. Negative offsets add canvas space on the corresponding side so the shadow is never drawn outside the output rectangle. Blur values above zero reserve an equal margin of twice the blur on every edge of the canvas, regardless of offset direction, which is what guarantees the feathered edge is never clipped at the original image boundary.
How to Add Shadow to a Photo in Your Browser
Open the Add Shadow to Image tool and follow the steps below. The whole flow runs in the current tab; no upload happens.
- Choose a local JPG, PNG, or WebP file. The file must be browser-decodable and no larger than 25 MiB.
- Read the displayed source dimensions and the tool's pixel limit so the output fits within the canvas budget.
- Enter a horizontal offset in whole pixels from -500 to 500. Positive numbers shift the shadow right; negative numbers shift it left.
- Enter a vertical offset in whole pixels from -500 to 500. Positive numbers shift the shadow down in the output; negative numbers shift it up.
- Enter a blur radius in whole pixels from 0 to 250. Higher values produce a softer, wider feather and reserve more canvas margin on every side.
- Enter opacity as a whole percentage from 0 to 100. A value around 40 to 60 reads as a soft natural shadow for most photographs.
- Enter a six-digit hexadecimal color such as 000000 for a neutral black shadow or a custom value for tinted effects.
- Select Add shadow. The tool renders the source once with the canvas shadow state and once without it, then encodes the result as a PNG.
- Verify the reported expanded width and height. These include the blur margins and the absolute directional offset on the affected side.
- Select the download button to save a PNG named after the source, such as portrait-shadow.png. The file is full resolution even if the on-page preview was scaled to fit.
If the source or any setting changes, the previous result is invalidated and its temporary download URL is revoked, so you must select Add shadow again to refresh the output.
Why the Downloaded File Is Larger Than the Source
The output PNG is almost always wider, taller, or both wider and taller than the original photograph. That is by design: the canvas reserves twice the blur value on every side and adds the absolute directional offset on the affected side. The original image is then positioned inside that expanded area so the shadow's soft edges and any directional push are not clipped at the old image boundary.
Consider a 40 by 20 source image with an 8-pixel right offset, a 4-pixel upward offset, and 6 pixels of blur. The output width is 40 + 2x6 (left blur margin) + 2x6 (right blur margin) + 8 (absolute right offset) = 72 pixels. The output height is 20 + 2x6 (top blur margin) + 2x6 (bottom blur margin) + 4 (absolute upward offset) = 48 pixels. The shadow therefore falls in a 72 by 48 canvas, while the source photo still occupies its original 40 by 20 rectangle inside it. The same formula applies at any resolution: source width plus four times the blur plus the absolute horizontal offset, and source height plus four times the blur plus the absolute vertical offset.
Shadow Settings That Work for Common Photo Types
Different photo subjects look right with different shadow shapes. The table below describes the relationship between common scenarios and the controls that usually produce a clean result. Use it as a starting point, then adjust to taste.
| Photo type | Offset (X, Y in px) | Blur (px) | Opacity (%) | Notes |
|---|---|---|---|---|
| Product on a white page | 0, 6 | 10-14 | 35-50 | Single downward shadow reads as floor contact |
| Portrait or headshot | 4, 6 | 12-18 | 30-45 | Slight diagonal offset lifts the face from the background |
| Sticker or badge | 6, 6 | 4-8 | 60-80 | Tighter blur and higher opacity for a crisp printed edge |
| App or web thumbnail | 2, 4 | 6-10 | 40-55 | Small offset keeps the shadow inside the card layout |
| Cut-out subject over photo | 0, 8 | 14-22 | 25-40 | Lower opacity prevents the shadow competing with the new background |
These are starting points, not fixed recipes. Higher resolution source images can carry proportionally larger offsets and blurs without the shadow looking heavy. Low resolution sources look cleaner with smaller numbers and higher opacity to keep the halo visible at thumbnail size.
What the Tool Won't Do
The Add Shadow to Image tool is a straight raster drop-shadow renderer. It does not detect the subject, remove the background, add a border, or simulate studio lighting. It does not produce a perspective floor shadow, a long sunset shadow, or any effect that requires knowing where the ground is in the image. It does not claim byte-for-byte equivalence with CSS box-shadow; canvas shadow blur is a browser rendering effect rather than a print prepress measurement, so the exact feather pixels can vary slightly between browser engines. For pixel-precise prepress shadows, a dedicated editor is the right tool.
What it does do is bounded and predictable: one local image, five numeric controls, one transparent PNG output, and a deliberately expanded canvas so the shadow is never silently cropped at the original edge.
Local Processing and Privacy
The source file is decoded, drawn, encoded, previewed, and downloaded inside the current browser tab. The tool does not upload the photo or send its pixels to a remote image service. JPG and WebP sources are decoded to browser pixels, which means the original compression bytes and any embedded metadata are not retained in the output PNG; if metadata preservation matters, an EXIF-aware pipeline is required. Transparent areas in a PNG source remain transparent in the output except where the source alpha contributes to the shadow itself.
Invalid file types, empty files, oversized decoded images, decode errors, impossible output dimensions, missing canvas support, and PNG encoding failures all surface as visible errors rather than silent failures, which is the appropriate behavior for a tool that resizes the canvas in two dimensions on every render. The download is always a PNG named after the source, such as portrait-shadow.png, because a shadow normally needs transparent pixels outside the original rectangular image and JPG cannot carry that transparency. The preview shown on the page may be scaled to fit the layout, but the saved file keeps the natural output resolution calculated from the source dimensions and the chosen shadow settings, as documented by the browser's Canvas shadowBlur reference.