Add Drop Shadow to Image

The Add Drop Shadow to Image tool lifts any picture off the page with a soft, believable shadow — entirely inside your browser. Upload a photo, screenshot, logo or cut-out PNG, drag the light source to set the angle, then tune blur, spread, opacity and color. On a transparent PNG the shadow is built from the image's alpha channel, so a product or sticker casts a shadow in its own outline instead of a rectangle. Export a PNG with a transparent backdrop, a JPG on a solid or gradient background, or copy the matching CSS box-shadow code. Nothing is uploaded — your image never leaves your device.

The three numbers that make a shadow: offset, blur and spread

Almost every bad shadow comes from getting one of these three wrong. Offset is how far the shadow is pushed away from the subject — it tells the viewer where the light is and how high the object floats. Blur is how soft the edge is: a small blur reads as hard, direct light (sunshine, a flash), a large blur reads as diffuse light (an overcast day, a softbox). Spread grows or shrinks the shadow shape before the blur is applied, which is how you get a heavy halo or a shadow that is slightly tucked in under the object.

How to add a drop shadow to your image

1. Upload your image: Drag a picture onto the upload box or tap to choose one. Nothing is uploaded — the file is read straight into your browser.
2. Place the light: Drag the sun on the Light source pad. The shadow falls on the opposite side, and dragging further from the centre pushes it further away. Arrow keys work too.
3. Shape the shadow: Choose a type — Drop, Layered, Long or Glow — then set Blur, Spread, Opacity and the shadow color.
4. Pick a backdrop: Keep it Transparent for a PNG, or fill it with a solid color or gradient. Extra padding adds breathing space around the result.
5. Download or copy: Save a PNG or JPG at original, half or 2× size — or copy the generated CSS to reuse the same shadow on a web element.

Shadows that follow the subject, not the box

Most online shadow tools draw a rectangle behind your file. That is fine for a photo, but wrong for a cut-out product shot, a logo or a sticker: a round bottle should not cast a square shadow. This tool reads the alpha channel of your image and builds the shadow from the actual silhouette, so transparent areas stay shadow-free. Upload a transparent PNG and you will see a green note confirming it. For an ordinary opaque photo the silhouette is simply the picture's rectangle — rounded first, if you set a corner radius.

Which shadow type should you use?

Why percentages, not pixels

Every slider here is a percentage of the image's shorter side. A 9% blur looks the same on a 400 px thumbnail as on a 4000 px photo, so a preset you like keeps working when you swap in a bigger image — no recalculating. The tool still shows the equivalent pixel value beside the blur slider and inside the CSS panel, for when you need real numbers.

Tips for a believable shadow

Is my image private?

Yes. Unlike online editors that upload your picture to a server for processing, this tool runs entirely in your web browser using the HTML5 canvas. Your image never leaves your device, nothing is stored, and there is no account to create. Close the tab and the image is gone.

Frequently Asked Questions

Is this drop shadow tool free and private?

Yes. It is completely free and runs entirely in your web browser using the HTML5 canvas, so your image is never uploaded to any server and stays on your own device. The downloaded image has no watermark and there is no sign-up.

Does the shadow follow the shape of a transparent PNG?

Yes. The shadow is built from the image's alpha channel, so a cut-out product, logo or sticker casts a shadow in its own outline rather than a rectangle. If the image is a normal opaque photo, the silhouette is the photo rectangle, optionally with rounded corners.

How do I keep the background transparent?

Set the backdrop to Transparent and download a PNG. Only the shadow and the subject are drawn, so you can drop the result onto any color later. JPG cannot store transparency, so a JPG export fills the background white.

What is the difference between blur and spread?

Blur softens the edge of the shadow, fading it out over a distance. Spread grows or shrinks the shadow shape itself before it is blurred, so a large spread with a small blur gives a hard halo, while a small spread with a large blur gives a soft cloud.

Why is my shadow cut off at the edge of the image?

A shadow needs room outside the picture. This tool adds padding automatically from the offset, blur and spread, and you can add more with the Extra padding slider. If you export a JPG onto a colored backdrop, that padding is what the shadow lands on.

Can I get the CSS for the same shadow?

Yes. The CSS panel shows a ready-to-paste box-shadow and filter drop-shadow rule that matches the current settings, in pixels measured on your image. Copy it to give a web element the same look without exporting a file.

Additional Resources

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• Alpha compositing — Wikipedia