Give product cut-outs, logos, screenshots and photos a realistic shadow. The shadow follows the real outline of transparent PNGs, the canvas grows automatically so nothing is cut off, and the result downloads as a transparent PNG ready for any background.
Last updated:
Preview on
Shadow type
Background
Advertisement
Advertisement
How to use the Add Drop Shadow to Image
Add your image: drop a PNG with a transparent background (a product cut-out or logo) or any photo, paste it or press Choose image. A sample mug is loaded first.
Pick a preset such as Soft, Floating or Reflection, or choose the shadow type yourself.
Adjust the shadow: move it with the X and Y offsets (or angle and length for a long shadow), soften it with Blur, grow or shrink it with Spread, and set color and opacity.
Set the canvas: add margin, round the corners of photos and choose a transparent or colored background.
Download PNG to keep the transparency, or JPG for a flat image with the chosen background.
How the shadow is built
The shadow is made from the image's own alpha channel, the invisible layer that stores how opaque each pixel is. For a cut-out product or logo, that is its exact outline; for a photo without transparency it is the rectangle, or a rounded rectangle when you round the corners.
Spread uses an exact Euclidean distance transform of the outline: every pixel knows how far it is from the edge, so growing or shrinking the shape by a number of pixels keeps corners round and even.
Blur applies a Gaussian blur to the silhouette, the same blur that browsers use for CSS shadows (the blur value is twice the standard deviation of the Gaussian).
Opacity and color tint the silhouette before it is placed under the image.
Long shadow repeats the silhouette along the chosen angle (built in log₂(length) steps, so it stays fast) and fades it with a gradient.
Reflection flips the image vertically below itself and fades it out with a gradient mask.
Offsets, blur and spread are scaled to the image size (the pixel values shown are real pixels in your output), so a preset looks the same on a 500 px logo and a 2400 px product photo.
Shadow settings for common uses
Use
Type
Suggested settings
Product photo for a shop
Floating or Soft
Y offset 40 to 70, blur 40 to 60, spread −20, opacity 35 to 45 %
Logo on a website
Soft
Y offset 8 to 20, blur 20 to 40, opacity 20 to 30 %
Screenshot or photo card
Soft with rounded corners
Corners 3 to 6 %, Y offset 20, blur 50, opacity 30 %
Light comes from above in most scenes, so a shadow slightly below the object (positive Y offset) looks the most natural.
Further means softer: the higher an object floats above the surface, the larger the offset and blur and the lighter the shadow should be.
Tinted shadows: on colored backgrounds, use a darker shade of the background color instead of pure black for a more natural look.
Need a cut-out first? Remove the background before adding the shadow so it follows the object instead of the photo's rectangle.
Frequently asked questions
How do I add a drop shadow to a PNG?
Load the PNG and the shadow is created from its transparent outline automatically. Use the Soft preset as a starting point, set the X and Y offsets for the light direction, add Blur for a softer edge, then download the result as a PNG. The canvas is enlarged so the shadow fits and the background stays transparent.
Does the shadow follow the shape or just the rectangle?
For images with transparency the shadow follows the exact alpha outline, including holes and soft edges. Photos without transparency are treated as a rectangle; you can round their corners first and the shadow will be rounded too.
What do blur, spread and opacity do?
Blur softens the shadow edge, like a light source that is larger or further away. Spread grows (positive) or shrinks (negative) the shadow outline before blurring; a negative spread with a large Y offset gives the soft 'floating' look. Opacity sets how dark the shadow is.
What is a long shadow?
A long shadow is a flat-design effect in which the object casts a solid shadow that stretches far in one direction, usually at 45 degrees, often fading out. Set the Angle, Length and Fade to style it.
Why is the downloaded image bigger than my original?
The shadow sits outside the original object, so the canvas grows by the shadow's offset, blur and spread plus the Margin you choose. This prevents the shadow from being cut off. Set Margin to 0 for the tightest possible size.
Can I use the shadow on a website?
Yes. Download a PNG with a transparent background and place it on any page color; the soft shadow blends naturally. For simple boxes in HTML you can also use CSS box-shadow, but an image shadow works for any shape and in emails, slides and documents.
Is my image uploaded?
No. The shadow is rendered with the Canvas API in your browser and your image never leaves your device.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.