A controlled drop shadow for a still image can be generated inside your browser and dropped straight into a CapCut project as a transparent PNG without ever uploading the file. To add a shadow to an image for CapCut the right way, run a local browser tool that decodes your JPG, PNG, or WebP, draws a canvas-rendered shadow using the offsets, blur, opacity, and color you set, expands the canvas so the feather is not clipped, and exports the result as a transparent PNG named from the source. CapCut itself does not expose a true custom drop-shadow control on still-image overlays, so a separately prepared transparent PNG is the cleanest way to get a custom feather, a custom offset, a colored shadow, or a subtle low-opacity contact shadow. The whole pipeline runs on your device, the file never leaves your browser tab, and the PNG keeps transparency outside the original rectangular frame so it can sit cleanly over video, image, or color-clipped CapCut tracks.
Why Prep the Shadow in Your Browser First
CapCut's still-image overlay workflow is optimized for timing and motion rather than raster effects, and the shadow controls it does expose on imported PNGs and JPGs are limited in range and color choice. For a content creator who wants a custom drop shadow — a soft feather, a directional cast that matches the clip's key light, a colored glow around an icon, a low-opacity contact shadow under a product mockup — the cleanest workflow is to build the shadow yourself as a transparent PNG and import that PNG as an overlay.
Because the PNG keeps transparency outside the source rectangle, CapCut composites only the source pixels and their feathered shadow over the track beneath, with no visible image boundary. That single prep step is what an in-browser drop-shadow tool is built for, and it is the reason searches for ways to add a shadow to an image for CapCut usually land on local browser tools rather than the CapCut editor itself.
What the Browser Drop-Shadow Tool Does
The local drop-shadow tool at Add Shadow to Image takes one JPG, PNG, or WebP from your device, applies a canvas-rendered drop shadow using controls you enter by hand, and writes the result back out as a transparent PNG. File decoding, shadow drawing, preview generation, and PNG encoding all run inside the current browser tab — there is no upload step, the file never leaves your device, and the original JPG or WebP compression bytes and metadata are not preserved in the output.
The shadow is drawn using the browser's built-in Canvas shadow renderer, which is documented at the MDN CanvasRenderingContext2D.shadowBlur reference. The renderer accepts four inputs: a horizontal offset in whole pixels, a vertical offset in whole pixels, a blur radius in whole pixels, and a color. The tool passes those four inputs plus an opacity control to the renderer after validating each one against a fixed range.
The output canvas is deliberately larger than the source. Two times the blur value is reserved on every side, and the absolute value of the directional offset is added on the side the offset points toward. A 40 by 20 source with a 6 px blur, an 8 px right offset, and a 4 px upward offset therefore becomes 72 by 48 pixels, because width equals 40 plus 4×6 plus 8 = 72, and height equals 20 plus 4×6 plus 4 = 48. The original image is positioned inside that expanded area so a normal shadow is not silently cropped at the old image edge.
Set the Shadow Controls
Before clicking the apply button, fill in five controls. The tool validates each one against a fixed range and rejects anything outside it with a visible error, so you do not have to guess what works.
| Control | Accepted range | Effect on the output |
|---|---|---|
| Horizontal offset | -500 to 500 whole pixels | Positive moves the shadow right; negative moves it left in the output PNG |
| Vertical offset | -500 to 500 whole pixels | Positive moves the shadow down; negative moves it up in the output PNG |
| Blur radius | 0 to 250 whole pixels | Larger values feather the shadow edge and reserve more canvas margin |
| Opacity | 0 to 100 whole percent | 100 is fully opaque; 0 produces no visible shadow |
| Color | Six-digit hex, for example 000000 | Exact color of the shadow; transparency is governed by the opacity slider |
A few combinations map to common CapCut overlay jobs. A neutral low-opacity contact shadow under a product mockup uses offsets of 0, 0, a blur around 10 to 20, an opacity around 30 to 50, and a color of 000000. A hard directional shadow that matches a key light from the upper left uses offsets around -6 horizontal and -6 vertical, a blur around 2 to 6, and an opacity around 70 to 90. A colored glow for a sticker or icon uses a color set to the brand hue, offsets of 0, 0, a blur around 20 to 40, and an opacity around 60 to 80.
The canvas grows by twice the blur value on every side, so a blur of 50 expands the canvas by 200 px in width and 200 px in height before the offset is added. If your CapCut project has a strict frame, plan for that extra room before you commit to a large blur.
Add the Shadow and Export the PNG
Once the controls are filled in and the source file is selected, the apply step is short.
- Click the file picker and choose a local JPG, PNG, or WebP no larger than 25 MiB. The tool reads the file, decodes it in the browser, and shows the original dimensions.
- Enter the horizontal offset, vertical offset, blur, opacity, and six-digit hex color using the ranges in the table above. Whole numbers only — the controls reject fractional values before the canvas is drawn.
- Select Add shadow. The browser draws the source once with the canvas shadow state active and a second time without any shadow state, so the visible source pixels stay clean and the translucent shadow does not soften the foreground.
- Check the reported expanded width and height plus the encoded file size. If they look wrong — usually because blur is too large for the bounded canvas budget — adjust the controls and re-apply.
- Select Download. The PNG is named from the source, for example portrait-shadow.png, and the temporary preview URL is revoked as soon as the new result is generated.
If the source is a transparent PNG, transparency outside the source and its generated shadow is preserved in the PNG output. If the source is a JPG or WebP, the decoded pixels are re-encoded, so the original compression artifacts and metadata are not retained and the file size of the PNG will generally be larger than the source.
Drop the Shadow PNG Into a CapCut Project
Once the shadowed PNG is on your device, the rest of the workflow is a normal CapCut overlay import.
- In CapCut, open the project where you want the shadowed image, then choose Add overlay, Add image, and pick the PNG the tool exported.
- Place the overlay on the track above the video, image, or color-clip layer where you want the shadow to appear. Because the PNG keeps transparency outside the source, CapCut will composite only the source pixels and their feathered shadow over the track beneath.
- Scale and position the overlay. The shadow grows with the overlay, so a small source with a 30 px blur becomes a very soft, very large feather when the overlay is scaled up — pick a blur that reads correctly at your final overlay size, not at the source size.
- Match the shadow to the scene. If the clip has a key light from the upper left, set the offsets so the shadow falls right and down in the exported PNG before importing. CapCut's overlay transforms do not move the shadow independently of the source, so any directional tuning has to happen in the drop-shadow step.
If the result looks slightly different between the browser preview and the final CapCut composite, the cause is almost always the canvas shadow renderer itself rather than the PNG. The canvas shadowBlur property is a browser rendering effect, not a print prepress measurement, so the exact feather pixels can vary slightly between browser engines. Treat the preview as a guide and verify the look on the device you use to export the final video.
Known Limits of the Canvas Shadow Renderer
The drop shadow the tool produces is a raster canvas effect, not a CSS box-shadow. That distinction matters in three places. First, the tool does not claim byte-for-byte equivalence with CSS box-shadow, so a designer hand-tuning values in DevTools should not expect pixel parity. Second, canvas blur is a Gaussian-style feather; it does not produce a perspective floor shadow, a long studio-style cast, or a contact shadow that wraps under a 3D subject. For those effects a different tool is needed. Third, the tool is designed for straightforward raster drop shadows on still images — mockups, stickers, thumbnails, icons, podcast cover art, and similar fixtures — and it does not detect the subject, remove a background, add a border, or simulate studio lighting.
The practical limits to keep in mind. The input must be a browser-decodable JPG, PNG, or WebP no larger than 25 MiB. The source and expanded output dimensions are checked against the site's bounded canvas budget before any allocation, so overly large sources or extreme blur values can hit that ceiling and produce a visible error rather than a partial result. Offsets, blur, and opacity are whole numbers; fractional values are not accepted. The download is always PNG, because shadows require transparent pixels outside the original rectangular image and PNG is the format that keeps them transparent. The preview is scaled to fit the page; the download keeps the natural output resolution calculated from the source and shadow settings.
For a content creator building a CapCut overlay, those limits are almost never the binding constraint. The binding constraint is usually the visual brief — picking the right offset, blur, and opacity for the lighting of the underlying clip — and the browser tool gives you exactly the controls you need to tune that brief before the PNG ever enters CapCut.