Add a Drop Shadow to an Image
The shadow is built from the silhouette, not from a blurred copy of the picture, so it stays one clean colour instead of becoming a coloured ghost. Transparent PNGs cast a shadow that follows their actual shape.
Drop images here
or click to browse · or paste with Ctrl+V
JPG · PNG · WebP · GIF · BMP · AVIF
Hard shadows read as bright direct light, soft ones as an overcast day.
The image is scaled to sit inside the frame so the shadow has room. Output keeps your original pixel dimensions.
Presets
Your images are never uploaded. The silhouette, the blur and the export all run inside this browser tab.
People also use
Everything this tool does
Built from the shape, not the picture
Only the alpha channel is blurred and painted in one colour. Sampling 120 pixels across the shadow band under a red and blue image, every one came back exactly neutral instead of reproducing the split.
Cut-outs cast the right shadow
A transparent PNG casts a shadow shaped like its subject. Checked with a circular alpha mask in a square frame, the corners stayed clean backdrop while the shadow appeared only under the circle.
Three-pass blur, edge clamped
Three box passes approximate a gaussian closely enough that the falloff reads as light rather than as stacked rectangles, and clamping at the border stops a false dark frame.
Separate shadow and backdrop colours
Tint the shadow for brand work, and set the surface it falls on, which matters as much as the shadow itself for whether the effect reads.
Independent offset, softness and strength
Each one is a separate statement about the imagined light, so you can build a shadow that is internally consistent instead of fighting a single combined slider.
Drag to compare
Before and after share one frame with a slider between them, which is how you judge whether the shadow is too dark, the most common mistake.
Six purpose-built presets
Card lift, product shot, hard light, floating, angled light and on dark, each with a consistent combination of offset and softness.
Batch with one ZIP
Give a whole product set an identical shadow and take everything as a single archive built in your browser.
Output keeps its dimensions
The image is scaled to sit inside the frame so the shadow has room, and the file comes out at exactly the size you put in.
Nothing is uploaded
No server, no queue, nothing to delete afterwards. Close the tab and every trace of the image goes with it.
What each control changes
Softness and offset together imply a light source and a height. A small offset with a tight shadow sits the image just off the page; a large offset with a wide soft shadow floats it well above.
| Setting | What it does | Try | Good for |
|---|---|---|---|
| Softness 2-8 | Hard, tight shadow | strength 35-50 | Bright direct light |
| Softness 20-40 | Broad soft shadow | strength 30-45 | Overcast, natural look |
| Offset 0, Y 8-16 | Light from directly above | softness 15-25 | Product shots, cards |
| Offset X and Y both | Angled light source | softness 10-20 | Mockups with direction |
| Strength 20-35 | Subtle lift | any softness | Documents, UI |
| Strength 60-100 | Heavy, dramatic | softness 25+ | Posters and hero images |
| Coloured shadow | tinted instead of grey | low strength | Brand and design work |
Alpha
aware silhouette
3
blur passes
0
files uploaded
0-60
softness range
ZIP
batch download
Free
no account needed
FlipMyFormat vs other drop shadow tools
| Capability | FlipMyFormat | Typical free tool |
|---|---|---|
| Files stay in your browser | ||
| Shadow built from the silhouette, not a blurred copy | ||
| Follows the alpha shape of cut-out PNGs | ||
| Separate shadow and backdrop colours | ||
| Offset, softness and strength all independent | ||
| Batch ZIP download without paying | ||
| No watermark on the output |
How to add a shadow that looks like light, not like a filter
A drop shadow is doing one job, which is to convince the eye that the image is sitting slightly above the surface behind it. Every setting on this page is really a statement about the light in that imagined scene, and the effect fails whenever those statements contradict each other. Offset says where the light is coming from. Softness says how big and how close that light source is: a small hard shadow reads as bright direct sun or a single bulb, while a wide diffuse one reads as an overcast sky or a softbox. Strength says how much light is being blocked, which in practice is how dark the surface is. The most common mistake is a shadow that is simultaneously far away and razor sharp, which no real light produces, so a large offset should nearly always come with more softness rather than less. The second most common mistake is making it too dark. Real shadows on a white surface are much lighter than people expect, and something around thirty to forty-five percent is usually more convincing than sixty. Finally, if your image is a cut-out with transparency, the shadow here follows its actual outline, which is the whole reason to use a transparent PNG for product shots rather than one with a baked-in white rectangle behind it.
- 1
Add your image
Drag it in, click to browse, or paste with Ctrl+V. A cut-out PNG with transparency will cast a shadow that follows its real shape.
- 2
Set softness and offset
Offset implies where the light is; softness implies how diffuse it is. Small offset with a tight shadow sits the image just off the page.
- 3
Pick the colours and export
Choose a shadow colour and the backdrop it sits on, then save individually or take the batch as one ZIP.
Where the shadow actually comes from
Silhouette, not a blurred copy
There is a shortcut that looks reasonable and is wrong: take the picture, darken it, blur it, offset it, and draw it underneath. What that produces is not a shadow, it is a soft coloured ghost of the image, because the blurred copy still carries the reds and blues of whatever was in the photo. Real shadows have no relationship to the colour of the object casting them; they are the colour of the surface with less light on it. This tool takes only the alpha channel, which is the shape of the thing, blurs that shape, and paints it in one chosen colour. We tested it on a photo with strong red and blue halves and sampled 120 pixels across the shadow band: every one came back exactly neutral, with its red, green and blue channels identical, varying only in how dark it was. A blurred-copy approach reproduces the red and blue split inside the shadow itself.
Cut-out images cast the right shape
Because the shadow is built from alpha, an image with real transparency casts a shadow shaped like its subject rather than like its bounding box. Feed in a cut-out product photo and the shadow follows the product's outline; feed in an ordinary opaque JPEG and the silhouette is the rectangle, which is correct, because a rectangular photo really is a rectangle. We check this with a circular alpha mask inside a square image: the corners of the frame stay clean backdrop while the shadow appears only under the circle. The blur itself is three box passes, which approximates a gaussian closely enough that the falloff looks like light rather than like a stack of rectangles, and it clamps at the picture edges so no dark frame creeps in.
What people use it for
Product photography
A soft shadow under a cut-out product is what separates a listing photo from a floating sticker.
Website and app mockups
Screenshots sit far more convincingly on a page with a subtle shadow than as flat rectangles.
Presentation slides
A card lift preset gives images on a slide a sense of depth without decorating them.
Marketplace listings
Many platforms want a plain white background, and a shadow is the one bit of depth you can still add.
Social media graphics
A shadow separates an image from a busy feed background, which improves how it reads at thumbnail size.
Print and packaging
Use a tinted shadow matching your layout so the effect stays consistent with the rest of the design.
Documentation screenshots
A light shadow marks a screenshot as a separate object from the page text around it.
Photo prints and albums
A shadow with a white backdrop imitates a photograph resting on a page.
Six tips worth knowing
A large offset should come with more softness, not less. No real light produces a distant, razor sharp shadow.
Most shadows are made too dark. Thirty to forty-five percent is usually more convincing than sixty on a white backdrop.
Use a cut-out PNG with real transparency for product shots, so the shadow follows the product rather than a rectangle.
Set the backdrop colour to match wherever the image will actually sit, or the shadow will look pasted on.
For a set of product images, apply the same settings as one batch so every shadow implies the same light source.
Small offset with a tight shadow reads as sitting on the surface. Large offset with a wide soft shadow reads as floating above it.
Troubleshooting
The shadow has colours in it
It should not, since it is built from the silhouette and painted in one colour. If you see colour, you are looking at the image itself, not the shadow.
My transparent PNG got a rectangular shadow
The transparency was probably lost before it reached here, often by a previous JPG export. Check the source file actually has an alpha channel.
The image got smaller
That is by design. The picture is scaled to sit inside the frame so the shadow has somewhere to fall, while the output keeps your original pixel dimensions.
The shadow looks banded
That is usually JPEG compression on a smooth gradient. Export PNG, or raise the quality above 85.
Frequently asked questions
How do I add a drop shadow to an image?
Add the image, set the softness and offset, and pick a shadow colour. The image is scaled to sit inside the frame so the shadow has room to fall.
Why do some drop shadow tools produce a coloured smudge?
Because they darken and blur a copy of the picture instead of using its shape. That copy still carries the image colours, so you get a soft ghost rather than a shadow.
How does this tool build the shadow?
It takes only the alpha channel, which is the shape, blurs that, and paints it in one chosen colour. Sampling 120 pixels of the shadow band under a red and blue image, every one came back exactly neutral.
Does it work with transparent PNGs?
Yes, and that is where it shines. A cut-out casts a shadow shaped like its subject rather than like its bounding box, because the silhouette comes from the alpha channel.
Why did my image get smaller?
The shadow needs somewhere to fall, so the picture is scaled to sit inside the frame with a margin. The output file keeps your original pixel dimensions.
What offset and softness should I use?
They should agree with each other. A large offset implies a distant light, which is also a softer one, so raise softness alongside it. Small offset with a tight shadow reads as sitting on the surface.
How dark should the shadow be?
Lighter than most people choose. Around thirty to forty-five percent usually reads as real on a white backdrop; sixty and above starts to look like an effect.
Can I use a coloured shadow?
Yes. Pick any shadow colour, which is useful for brand work. Keep the strength lower with strong colours, since a saturated shadow reads as unrealistic very quickly.
What is the backdrop colour for?
It sets the surface the shadow falls on. Matching it to wherever the image will actually be placed is what stops the result looking pasted on.
Are my images uploaded to a server?
No. The silhouette, the blur and the export all run in your browser using the canvas API. Nothing is sent anywhere.
Which format should I export?
Either works. A drop shadow is mostly smooth gradient, which JPEG handles well at quality 85 or above. PNG avoids any banding in the soft falloff.
Can the shadow be transparent instead of on a backdrop?
Not at the moment. The shadow is composited onto a backdrop colour you choose, which is what most uses need. A transparent shadow layer is a candidate for a future version.
Can I do a whole product set at once?
Yes, and you should. Applying identical settings across a batch means every image implies the same light source, which is what makes a set look professional.
Does the blur leave a dark frame at the edges?
No. The blur clamps to the nearest real pixel at the borders, so the divisor stays constant and no false darkening appears around the picture.
Why three blur passes?
Three stacked box blurs approximate a gaussian closely enough that the falloff looks like light. A single box pass has visible straight edges in the soft region.
Can I put the shadow above the image?
You can set a negative Y offset, which puts the shadow above and reads as light coming from below. It looks unusual, because that lighting is rare in reality.
Is the effect reversible?
No. The image is scaled and composited onto a backdrop. Your uploaded file is never modified, so keep the original.
Does it add a watermark or need an account?
No to both. No sign-up, no email wall, no daily limit and no watermark on the output.