Adding a drop shadow to an image in Photoshop is a five-control operation: a horizontal offset, a vertical offset, a blur radius, an opacity percentage, and a shadow color, all set through the Layer Style dialog. The browser-based Add Shadow to Image tool reproduces that exact same set of five controls — whole-pixel offsets from -500 to 500, a blur radius from 0 to 250 pixels, an opacity from 0 to 100 percent, and a six-digit hex color — on a local JPG, PNG, or WebP, then exports the result as a full-resolution transparent PNG. The shadow is drawn using the browser's Canvas API — specifically the CanvasRenderingContext2D shadowBlur and drawImage methods documented by MDN — and the canvas is deliberately enlarged so the blur and directional offset are not clipped at the original image edges. Decoding, drawing, preview rendering, PNG encoding, and the file download all happen inside the current browser tab rather than on a remote server, which makes the workflow visually equivalent to a Photoshop layer style while removing the need to launch Adobe Photoshop for a quick thumbnail, sticker, or product mockup.
Drop Shadow in Photoshop: The Standard Layer Style Path
Photoshop exposes drop shadow as a layer style, and the standard path is identical across recent versions: open the layer, run Layer > Layer Style > Drop Shadow, then set the controls in the dialog. The five inputs map directly to the controls the browser tool exposes, so anything you learn in this section transfers verbatim.
- Open the image in Photoshop and confirm the layer that should cast the shadow is selected in the Layers panel. If your image is flattened, double-click the Background layer to convert it to a regular layer first.
- Open Layer > Layer Style > Drop Shadow, or double-click the layer outside its name to open Blending Options and check the Drop Shadow row.
- Set Blend Mode (usually Multiply), an exact shadow color, an Opacity percentage, an Angle (which controls horizontal and vertical offset together — 0° is straight down), a Distance in pixels, a Spread percentage, and a Size in pixels (which acts as the blur radius).
- Click OK to apply the layer style. Photoshop renders the shadow against the layers beneath, and you can read the visible offset directly in the document window.
- Export the result: File > Export > Export As, choose PNG so the shadow pixels that fall outside the original rectangle remain transparent.
That is the canonical Photoshop path. If the layer sits against a transparent background, Photoshop keeps the shadow pixels outside the original rectangle transparent, which is the same behavior the browser tool replicates. The cost of that canonical path is the overhead of launching the application, opening the file, applying the layer style, and exporting — overhead that a browser-based local tool can skip when all you need is the drop shadow itself.
When to Skip Photoshop for a Drop Shadow
For mockups, thumbnails, social tiles, stickers, and presentation assets, opening Photoshop for a single drop shadow is heavy. The application has to launch, the file has to decode, the layer style has to render against a transparent canvas, and a flat PNG export has to be written to disk. A browser-based local tool removes that overhead: the file is selected from disk, the five controls are filled in, and the result is downloaded in the same session without any upload step. You get the same horizontal offset, vertical offset, blur, opacity, and color inputs, and the same transparent PNG output, just without Photoshop in the loop.
Add Shadow to Image: A Local Alternative
The Add Shadow to Image tool accepts one local JPG, PNG, or WebP up to 25 MiB, validates the inputs, then encodes a transparent PNG whose dimensions are calculated from the source size plus reserved blur and offset margins. The five controls match Photoshop's drop shadow inputs one-to-one: horizontal offset, vertical offset, blur, opacity, and color. Because the canvas is rendered with the browser's Canvas API rather than a third-party image service, the file's pixel data never leaves your machine, and no account or sign-in is required.
How to Add a Shadow to an Image Locally
- Choose a local JPG, PNG, or WebP from your machine. The file must be browser-decodable and no larger than 25 MiB; oversized, unsupported, or undecodable files are rejected with a visible error.
- Enter a horizontal offset and a vertical offset as whole pixels between -500 and 500. Positive horizontal moves the shadow right and negative horizontal moves it left; positive vertical moves it down in the downloaded image, and negative vertical moves it up.
- Enter a blur radius as whole pixels between 0 and 250. This is the feather amount applied to the shadow edge; 0 produces a hard-edged offset copy.
- Enter an opacity as a whole percent between 0 and 100. This controls how solid the shadow pixels render against the canvas.
- Enter a shadow color as an exact six-digit hex value, for example #000000 for pure black or #1a1a1a for a near-black tint.
- Select Add shadow. The browser expands the canvas to fit the blur plus the directional offset, draws the source once with the shadow state and then again without it, and encodes the result to PNG.
- Verify the expanded width, expanded height, and encoded file size reported beneath the preview. If the source or any control changes, the previous result is invalidated and its temporary download URL is revoked.
- Download the PNG. The filename is derived from the source — for example, a file named portrait.png downloads as portrait-shadow.png.
Shadow Control Ranges and What They Mean
Each control has a fixed numeric range, and inputs outside that range fail validation before the canvas is allocated. The browser-side limits match what Canvas shadow rendering can usefully accept on common screen resolutions and keep the expanded canvas within the site's bounded canvas budget.
| Control | Input type | Accepted range | What it does |
|---|---|---|---|
| Horizontal offset | Whole pixels | -500 to 500 | Positive moves the shadow right, negative moves it left. |
| Vertical offset | Whole pixels | -500 to 500 | Positive moves the shadow down in the downloaded image, negative moves it up. |
| Blur radius | Whole pixels | 0 to 250 | Feathers the shadow edge; 0 produces a hard-edged offset copy. |
| Opacity | Whole percent | 0 to 100 | How solid the shadow pixels render against the canvas. |
| Shadow color | Six-digit hex | #000000 to #FFFFFF | Tint applied to every shadow pixel before alpha is multiplied by opacity. |
All five inputs are integers or six-digit hex, which makes the result reproducible: re-entering the same five values against the same source always produces the same expanded dimensions and the same shadow placement. The preview may be scaled to fit the page, but the downloaded PNG keeps the natural output resolution calculated from the source and shadow settings.
How the Expanded Canvas Size Is Calculated
The output canvas is deliberately larger than the source so the shadow is not silently cropped at the original rectangle. The math is explicit: each side of the canvas reserves twice the blur value, and the absolute directional offset is added to the side the shadow is moving toward. Translucent pixels outside the source and its shadow stay transparent in the PNG, which is why PNG (not JPG) is used for the export — a shadow that extends beyond the original rectangle has to live on transparent pixels, and JPG has no alpha channel.
Worked example, taken from the documented behavior of the tool: a 40 by 20 source with an 8-pixel right offset, a 4-pixel upward offset, and 6 pixels of blur.
- Left margin: 2 × blur = 12 pixels.
- Right margin: 2 × blur + right offset = 12 + 8 = 20 pixels.
- Top margin: 2 × blur + absolute upward offset = 12 + 4 = 16 pixels.
- Bottom margin: 2 × blur = 12 pixels.
Substituting into the dimensions: output width = 12 + 40 + 20 = 72 pixels, and output height = 16 + 20 + 12 = 48 pixels. The original 40 by 20 image is positioned inside that larger 72 by 48 area at the offset dictated by the directional controls, so a normal shadow is not silently cropped at the old image edge.
When a Browser Drop Shadow Is the Right Choice
The tool is built for straightforward raster drop shadows where the inputs are limited to the five controls above. It fits cleanly when you need a flat shadow for a product mockup, a social tile, an app store screenshot, a sticker, a presentation thumbnail, or a UI asset where the shadow is decorative rather than physically simulated. Because the canvas is expanded to fit blur plus offset, the result is safe to drop onto a colored or photographic background without the shadow being clipped at the image edge.
It is explicitly not designed to match a CSS box-shadow or filter: drop-shadow declaration byte-for-byte. Canvas shadowBlur 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 detect the subject, separate foreground from background, remove a background, simulate a perspective floor shadow, or recreate studio lighting. If your deliverable needs any of those, a Photoshop layer style or a 3D renderer is still the right tool. For everything else — a quick decorative offset and blur around a flat image — the local browser path produces the same visual outcome with five integer inputs and a transparent PNG download.
Local Processing and No Upload
Every step happens inside the current browser tab. The source file is read from local disk, decoded by the browser, drawn onto a CanvasRenderingContext2D with the shadow state you specified, drawn a second time without a shadow to keep the visible source pixels clear, then encoded back to PNG using the browser's canvas toBlob method. The pixels never leave the machine: there is no upload step, no remote image service, no sign-in, and no temporary cloud storage of the file. Invalid input types, empty files, oversized decoded images, impossible output dimensions, decode errors, missing Canvas support, and PNG encoding failures each produce a visible error rather than a corrupted download. Changing the source or any control invalidates the previous result and revokes the temporary download URL, so a stale image cannot be re-downloaded after a re-render.