Skip to content
Lizely

Add Shadow to Image

Add a controlled drop shadow to a local JPG, PNG, or WebP and download a full-resolution transparent PNG without uploading the image.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Choose a local JPG, PNG, or WebP within the displayed file and pixel limits.
  2. 2.Set whole-pixel offsets and blur, then choose shadow opacity and color.
  3. 3.Select Add shadow, verify the expanded dimensions, and download the PNG.

About Add Shadow to Image

Add Shadow to Image creates a new PNG with a browser-rendered drop shadow around one local image. Choose a JPG, PNG, or WebP, enter the horizontal and vertical offsets, choose a blur radius, opacity, and color, then select Add shadow. The source is decoded, drawn, and encoded inside the current browser tab. Lizely does not upload the file or send its pixels to a remote image service.

Offsets accept whole pixels from -500 to 500. Positive horizontal values move the shadow right and negative values move it left. Positive vertical values move it down in the downloaded image, while negative values move it up. Blur accepts whole pixels from 0 to 250, and opacity accepts a whole percentage from 0 to 100. The shadow color uses an exact six-digit hexadecimal input. These controls are passed to the browser Canvas shadow renderer after validation.

The output canvas is deliberately larger than the source. It reserves twice the blur value on every side and adds the absolute directional offset on the affected side. A 40 by 20 image with an 8-pixel right offset, a 4-pixel upward offset, and 6 pixels of blur therefore becomes 72 by 48 pixels. The original image is positioned inside that expanded area, so a normal shadow is not silently cropped at the old image edge.

The tool first draws the source with the selected Canvas shadow state and then draws the source once more without a shadow. The second draw keeps the visible source pixels clear instead of letting translucent shadow treatment soften the original foreground. Transparent areas in a PNG remain transparent except where the source alpha produces a shadow. JPG and WebP sources are decoded to browser pixels, so their original compression bytes and metadata are not retained.

Input files must be browser-decodable JPG, PNG, or WebP files no larger than 25 MiB. Source and expanded output dimensions are checked against the site's bounded canvas budget before allocation. Invalid types, empty files, oversized decoded images, impossible output dimensions, decode errors, missing Canvas support, and PNG encoding failures produce a visible error. Changing the source or any setting invalidates the old result and revokes its temporary download URL.

The download is always a PNG named from the source, such as portrait-shadow.png. PNG is used because a shadow normally needs transparent pixels outside the original rectangular image. The result reports the exact expanded width and height plus the encoded size. The preview may be scaled to fit the page, but the download keeps the natural output resolution calculated from the source and shadow settings.

Canvas shadow blur is a browser rendering effect rather than a print prepress measurement, so exact feather pixels can vary slightly between browser engines. This tool does not claim CSS box-shadow byte-for-byte equivalence, add a border, remove a background, detect the subject, create a perspective floor shadow, or simulate studio lighting. Use it for straightforward raster drop shadows, mockups, stickers, thumbnails, and fixtures where local processing and predictable canvas bounds matter.

Methodology & sources

Validate one bounded local image and whole-number shadow controls, derive an expanded canvas from two blur margins plus directional offset, draw the source once with Canvas shadow state and once without it, encode PNG, guard stale asynchronous work, and revoke replaced Object URLs.

Frequently asked questions

Why is the downloaded image larger than the source?
The canvas reserves room for blur and directional offset so the shadow is not clipped at the original edges.
Can the shadow extend left or upward?
Yes. Enter a negative horizontal or vertical offset; the tool adds space on the corresponding side.
Does a transparent PNG stay transparent?
Yes. Pixels outside the source and its generated shadow remain transparent in the PNG output.
Is my image uploaded?
No. File decoding, Canvas drawing, PNG encoding, preview, and download creation run locally in your browser.

Related tools

Image Tools guides

View all