Add a drop shadow to a JPG, PNG, or WebP using four whole-pixel controls — horizontal and vertical offsets from -500 to 500, a blur radius from 0 to 250, an opacity percentage from 0 to 100, and a six-digit hex color — and download a transparent PNG whose canvas has been widened on every side so the shadow is never clipped at the original image edge. Add Shadow to Image runs every decoding, drawing, and PNG encoding step inside the current browser tab, so the source file never reaches a remote image service. Designers searching "add shadow to image Canva" usually want offset, blur, opacity, and color combined with a transparent PNG that drops straight into a mockup, sticker sheet, thumbnail, or fixture, and that is exactly what the local workflow delivers. Canva handles the same four inputs inside a project, while this browser tool produces the same transparent PNG without a project, a login, or a queue.
How a Canva-Style Drop Shadow Works
A drop shadow in Canva, Figma, Photoshop, or any image editor is a second, blurred, often translucent copy of the original pixels, shifted by a small horizontal and vertical offset and tinted by a chosen color. That second copy creates depth, separates the foreground from the background, and helps a flat rectangle read as a sticker, a card, a button, a thumbnail, or a UI element floating above the layer beneath it. The shadow is not part of the original image, which is why designers want it baked onto a transparent canvas instead of a flat rectangle with a colored border around the subject. Once the shadow lives inside a transparent PNG, that PNG can be placed on any background — light, dark, gradient, or photo — without rebuilding the effect each time it moves.
Canva's shadow effect is one well-known path to this output: select an image or element, open Effects, find the Shadow controls, and adjust offset, blur, opacity, and color. Inside Canva the result is composited onto whatever canvas or design the user is editing. Outside Canva, where the reader wants a transparent PNG with a shadow already drawn around the foreground, the same four numeric controls are exactly what a browser Canvas shadow renderer takes, which is why a local browser shadow tool reproduces the visual without needing the rest of a Canva project. The local path is useful when the source cannot leave the device, when a project is not open yet, or when the goal is one transparent PNG with shadow rather than a composited design.
Controls: Offsets, Blur, Opacity, and Color
The four inputs that produce the shadow are small enough to fit on a screen together, and they each have a defined range. Offsets say which way the shadow falls relative to the source; blur softens the shadow edge; opacity sets how solid the shadow tint reads; color sets the shadow tint itself.
| Control | What it controls | Accepted range |
|---|---|---|
| Horizontal offset | Moves the shadow right (positive) or left (negative). | -500 to 500, whole pixels |
| Vertical offset | Moves the shadow down (positive) or up (negative) in the downloaded image. | -500 to 500, whole pixels |
| Blur | Softens the shadow edge using the browser's Canvas shadowBlur effect. | 0 to 250, whole pixels |
| Opacity | Sets how solid the shadow tint appears. | 0 to 100, whole percent |
| Color | Exact color of the shadow tint. | Six-digit hexadecimal (#RRGGBB) |
Behind the scenes, those inputs feed CanvasRenderingContext2D properties such as the browser's Canvas shadowBlur that are validated and applied before the source image is drawn. Because the underlying value is the browser's Canvas shadow renderer rather than a print renderer, very small differences in feather softness between browser engines are normal and are part of how the effect is defined. Whole-pixel inputs are required, which keeps the output dimensions predictable and the shadow geometry reproducible.
How to Add a Shadow to an Image Locally
Once a local JPG, PNG, or WebP is on disk, the three steps below produce a downloadable transparent PNG with a drop shadow baked in.
- Open Add Shadow to Image and pick a local JPG, PNG, or WebP no larger than 25 MiB that the browser can decode. The chosen file never leaves the tab.
- Enter the horizontal and vertical offsets as whole pixels from -500 to 500, set the blur from 0 to 250, set the opacity from 0 to 100, and type a six-digit hex color for the shadow.
- Select Add shadow, verify the expanded width and height the tool reports, and download the PNG. The download is named after the source file with -shadow appended, so portrait.png becomes portrait-shadow.png.
Changing the source image or any setting after the first render invalidates the old preview and revokes the old download URL, so the file you save always matches the current settings. That makes it safe to iterate through a stack of artboards or thumbnails without leaving stale renders in the downloads folder. The result block also reports the exact expanded width and height plus the encoded size, which is useful when the PNG has to fit a precise frame on a marketing page or a print sheet.
Why the Output PNG Is Larger Than the Source
The downloaded PNG is wider and taller than the input on purpose, because the canvas is laid out to keep the shadow fully visible. Two rules describe the new size:
- Twice the blur value is added on every side, giving the feathered edge room to fall.
- The absolute directional offset is added on the affected side, so a positive horizontal offset adds that many pixels on the right, and a negative vertical offset adds that many pixels on the top.
For a concrete walkthrough, a 40 by 20 source image with an 8-pixel right offset, a 4-pixel upward offset, and 6 pixels of blur becomes 72 by 48 pixels. Working through the width first: 40 (source) + 12 (blur reserved on the left) + 12 (blur reserved on the right) + 8 (positive right offset) = 72 pixels. Working through the height next: 20 (source) + 12 (blur reserved on top) + 12 (blur reserved on bottom) + 4 (absolute value of the upward offset) = 48 pixels. The source image is positioned inside that larger canvas, so the blur and the offset never get silently cropped at the old edge.
The preview on the page can be scaled to fit the layout, but the download keeps the natural output resolution calculated from the source and the current shadow settings. The result is reported in expanded width and height plus encoded file size, so the PNG going into a mockup or thumbnail stack has predictable bounds every time.
File Types, Size Limits, and Local Processing
Three input formats are accepted: JPG, PNG, and WebP. Each file has to be one that the browser can decode, and each decoded image plus each expanded canvas is checked against a bounded canvas budget before the tool allocates anything. Input files must be browser-decodable JPG, PNG, or WebP files no larger than 25 MiB. Invalid types, empty files, oversized decoded images, impossible output dimensions, decode errors, missing Canvas support, and PNG encoding failures all produce a visible error rather than a half-rendered image.
Because the file is read, decoded, drawn, and encoded inside the current browser tab, no pixels travel to a remote image service. There is no account and no upload step. JPG and WebP sources are decoded to browser pixels, so their original compression bytes and metadata are not retained in the output PNG. PNG sources keep their transparency, and pixels outside the source and its generated shadow remain transparent in the PNG output, which is what makes the result drop cleanly onto a colored or photographic background without a halo.
If blur behavior is the part of the workflow that needs the most care, the practical guide on using the Canva blur effect in your browser walks through how the same blur parameter shapes a softer image versus the soft edge of a shadow, which makes the two effects easier to tune side by side.
When This Workflow Fits (and When It Does Not)
It fits where a plain raster drop shadow is wanted without dragging a design app along for the ride: thumbnails on a card or homepage, sticker PNGs for a print sheet, fixture snapshots, product images on a marketing page, mockup placeholders, and social graphics where the foreground has to read as a separate layer. It is also a clean choice when the source cannot be uploaded — a private screenshot, an unreleased product render, a client asset — because the entire pipeline is local and no pixels leave the device.
It does not fit several workflows that look similar but use different machinery. The tool does not claim CSS box-shadow byte-for-byte equivalence, because browser Canvas blur and CSS blur rely on different rendering paths. It does not add a border, remove a background, detect the subject, generate a perspective floor shadow, or simulate studio lighting. It produces one straightforward raster drop shadow per render — no preset styles, no stacking, no inner shadow — and the whole shadow lives on the transparent PNG it outputs.
For design apps that include shadow as one of many compositing features, Canva still gives a shadow inside an editing canvas. For a single transparent PNG with shadow that is ready to download, Add Shadow to Image produces the same four-input outcome with nothing else attached, and the source never leaves the browser.