How to Add a Drop Shadow to a Screenshot (Without Overdoing It)
A flat screenshot on a coloured background looks pasted in. A shadow fixes that in one setting — but too much shadow looks worse than none. Here is how to pick the right amount.
The fastest way to tell a screenshot was assembled by someone who cares about the result: it has a shadow. The fastest way to tell it was overdone: the shadow is too heavy. Both mistakes are common, and both are one setting away from being fixed.
Why a flat screenshot looks wrong on a background
Once you place a screenshot on a coloured or gradient backdrop — which is the whole point of adding a background in the first place — you have created a hard edge where none existed before. Without a shadow, that edge is purely geometric: a rectangle sitting on another rectangle, with no cue about which is in front. Your eye processes this as “collage,” not “design.”
A shadow fixes it by simulating a light source above the image. The screenshot appears to be raised slightly off the surface, which is the same depth cue that makes a sticky note on a desk read as a physical object rather than a printed pattern. It costs one setting and changes how finished the whole image looks.
Picking the right amount
Four levels cover the realistic range, and picking between them comes down to how much the screenshot needs to stand out from what is behind it:
None. Correct when the background is already transparent or when the screenshot is going into a context — a slide, a printed page — where a floating shadow would look out of place next to everything else on it.
Soft. A tight, low-opacity shadow directly under the image. This is the right default for documentation and tutorials: enough to separate the screenshot from its background, not enough to draw attention away from the content inside the screenshot, which is the actual point of a documentation image.
Lifted. A larger, more visible shadow — the right choice for social posts, changelog announcements, and anywhere the framed screenshot itself is the thing being looked at, not just a supporting illustration next to text.
Dramatic. The largest blur radius and highest opacity. Reserve this for marketing hero images with a busy or photographic backdrop, where a subtler shadow would get lost against the background. On a plain or light backdrop, Dramatic usually looks heavy-handed rather than premium — match the shadow strength to how much visual noise it needs to cut through, not to how important the image feels.
The mistake that undoes all of it: not enough padding
A shadow needs room to render. If the padding around the screenshot is too tight, the shadow gets clipped at the canvas edge — you end up with a shadow on three sides and a hard cutoff on the fourth, which looks more broken than no shadow at all. Increase padding until the shadow has clear space to fade out on every side before you judge whether the shadow strength itself looks right.
Matching shadow to context
| Where the screenshot is going | Shadow | Reasoning |
|---|---|---|
| Documentation, step-by-step tutorial | Soft | Should separate from background without competing with content |
| Social post, changelog, announcement | Lifted | The image itself is the post — it should read as designed |
| Marketing page, hero image, App Store screenshot | Dramatic | Needs to cut through a busier or photographic background |
| Slide deck, printed document | None | A floating shadow looks out of place next to flat page elements |
Doing it
- Load your screenshot and set a background (even a transparent one works — see the FAQ above).
- Add enough padding that a shadow has room to render without clipping at the edge.
- Pick a shadow preset based on the table above, starting with Soft and only increasing it if the image still looks flat against its background.
- Keep the same preset across every screenshot in a series — consistency matters more than which specific level you pick.
- Export as PNG if the screenshot has sharp text or UI detail; JPG if the background is a large gradient or photo and file size matters more than pixel-perfect edges.
This all runs in your browser with no upload step. ShotEdit’s Screenshot Beautifier has the four shadow presets built in alongside background and corner controls, is free, and exports without a watermark.
Frequently asked questions
Why does a screenshot need a shadow at all?
Only if it is sitting on a background. A flat screenshot cut out against a solid or gradient backdrop has a hard, geometric edge with no depth cue — your eye reads it as a rectangle placed on top of another rectangle. A soft shadow underneath simulates the screenshot being physically lifted off the surface, which is the visual cue that makes composited images read as intentional rather than pasted in.
What is the difference between a soft shadow and a dramatic shadow?
Blur radius and opacity. A soft shadow is a tight, faint blur directly under the image — barely noticeable, appropriate for documentation where the shadow should not compete with the content. A dramatic shadow has a larger blur radius and higher opacity, creating visible separation between the screenshot and the background — appropriate for marketing images where the screenshot needs to feel like the hero of the page.
Should every screenshot in a document use the same shadow?
Yes. Inconsistent shadow strength across a series of screenshots is one of the more common tells that a document was assembled screenshot-by-screenshot rather than designed. Pick one preset and use it for every image in the set.
Does a shadow work on a screenshot with a transparent background?
Yes, and it is actually where shadows matter most — a transparent PNG dropped directly onto a page has no edge definition at all until a shadow is added underneath it.
Can I add a shadow without also adding a background?
Technically the shadow renders against whatever backdrop the screenshot sits on, so if you want to skip the background entirely, set it to transparent and keep the shadow — the screenshot will still get a soft lift when placed on your page's own background.