A drop shadow on a transparent PNG: direction, softness and the hard black edge

A cutout on a plain page has one fault that has nothing to do with the edge: it floats. Nothing says what it stands on, so the eye reads it as a sticker laid over the page rather than an object in it. A drop shadow is the cheapest fix there is, and also the easiest to get wrong, because a shadow that is too dark, too sharp or aimed the wrong way is worse than none.

This page is about the shadow on a transparent PNG: what it is made of, the three decisions that make it look right, and the mistakes that give it away. getPNG can build the shadow for you and save it into the file. It does not place the cutout on another picture, so for that step you use the editor you already have, and how to overlay images so they look placed covers the rest of that job.

What a drop shadow is

A shadow in a PNG is not a second object. It is the subject’s own silhouette, moved a little away from the subject, blurred and dimmed, then drawn behind it. Because the outline of a cutout is its alpha channel, the shadow can be made from that alone, and it follows the shape: a shadow from a bottle is bottle-shaped, one from a chair has legs.

The shadow is stored as part-transparent pixels. That detail is what makes it useful. A grey rectangle painted into the picture would hide the page behind it, but a part-transparent shadow only darkens what is behind it, so it reads correctly on white, on cream, on a photograph. What a transparent background actually is goes into how alpha works if the idea is new.

In getPNG the drop shadow is optional and is built from the cutout’s own outline rather than from a second pass of the model. You set four things: strength (how dark it is at its darkest), softness (how far it blurs), distance (how far it is thrown from the subject) and angle (which way). Softness and distance are shares of the subject’s longer side, so the same settings look the same on a small picture and a large one. The shadow is drawn under the subject and saved into the file.

Decision one: the direction

Every picture with a light in it has one direction of shadow, and the eye checks yours against it before anything else. If the scene is lit from the top left, shadows fall down and to the right. A cutout whose shadow falls up and to the left tells everyone looking that it was not photographed there, and it is the one fault no amount of softening hides.

So find the light before you touch a slider. Look at where the other shadows in the picture fall, and where its highlights sit. Then set the angle to match.

In getPNG the angle is in degrees going clockwise from the right, so:

• 0 throws the shadow to the right.
• 90 throws it straight down.
• 180 throws it to the left.
• 270 throws it straight up, which is almost never what you want.

The angle moves in steps of ten degrees. For a scene lit from the top left, somewhere between 30 and 60 degrees puts the shadow down and to the right. For a plain white page with no scene to match, straight down at 90 is the safe choice and the one the tool starts with: a shadow directly beneath reads as an object resting on a surface lit from above, which is how most people expect a product to look.

If the picture has a light with no clear direction, such as an overcast day or a softbox directly overhead, there is very little cast shadow to match. Use a small amount straight down and nothing more.

Decision two: the softness

The shadow’s edge is where it gives itself away. Real shadows are soft because real lights are not points: the further a shadow is from the thing casting it, the blurrier it gets, and the shadow directly under a subject is both its darkest and its sharpest part. A shadow with a crisp edge all the way round looks like an outline filled with grey.

Raise Softness until you cannot say where the shadow stops. A few percent is enough for a contact shadow under a small object. A shadow thrown a long way, for a subject standing in low sun, needs more.

The tool starts at a soft setting and at a strength well short of black, because a gentle shadow is more forgiving than a hard one. That is a sensible place to begin and most pictures only need moving a little from it.

A softer shadow also takes more room. A blur spreads the shadow outward on every side, and the distance adds to whichever side the shadow points at. That matters for the last decision, and for the clipping covered below.

Decision three: the distance

A shadow starts where the subject touches something. On a table, that is the base of a bottle or the underside of a shoe, and the shadow runs away from that line. If you throw the shadow far from the subject, the gap between them says the subject is hovering above the surface.

So keep Distance small for anything resting on the ground and larger only for something that is clearly lifted, such as a product floating above a seamless background for effect. A contact shadow, small and fairly dark right at the base, is what gives a subject weight. A longer, paler shadow thrown away from it is what shows the direction of the light. Most pictures want the first more than the second.

The strength: a shadow is not black

Strength is how dark the shadow is at its darkest point. It runs from a faint trace to fully opaque, and almost nothing wants the top of that range.

A real shadow is the surface in less light, not a black patch. On a white page that comes out as a mid grey, and on a coloured background it is a darker shade of that colour. A fully opaque black shadow is the single most common reason a cutout looks pasted: the picture has a hard black shape under the subject that nothing in the scene could cast.

Keep the strength moderate, and judge it on the background it will really sit on. A shadow that looks right on white can look heavy on a pale grey and vanish on a dark one, because there is less difference between the shadow and what it falls on. Product photos on a white background shows how marketplace listings use a gentle shadow on pure white, and how a flat cutout on white behaves without one.

Leave room for it

A shadow is drawn in the picture’s own frame. If the subject touches the edge of the photo, its shadow is clipped there, and you get a shadow that stops dead at a straight line. That is the picture’s border and not a fault in the shadow.

The fix is to make room before you download. getPNG’s canvas sizes can give the subject a larger box, so the shadow has somewhere to fade out. The same applies in any editor: place the cutout on a canvas bigger than the subject, not on one the exact size of its bounding box.

It also affects how you crop. A tight crop round the subject cuts off the shadow along with everything else. If the shadow is part of the picture you want, crop to the subject and its shadow together, with a little extra on the side the shadow falls.

Check the edge first

A shadow is drawn from the outline of the cutout, so every flaw in the outline is in the shadow too. A stray patch left behind the subject becomes a stray patch of shadow. A bite out of the cutout becomes a bite out of the shadow.

So make the cutout right first. Check it on a colour close to where it will go, and if there is a pale rim round the subject, white halos and jagged edges after a cutout goes through the cause and the fix. Where the model has missed something, such as the gap between an arm and a body, paint it right by hand before you set the shadow, because the corrections are kept as strokes and the shadow still works on top of them.

Mistakes that give it away

• A hard black edge. The commonest one. Lower the strength and raise the softness until you cannot see where it stops.
• A shadow that points the wrong way. Worse than none, because it contradicts every other shadow in the picture.
• A shadow detached from the subject. The distance is too large for something resting on a surface.
• The same shadow on everything. Objects of different heights throw different shadows. A tall bottle throws a longer one than a flat tin, so a set of products needs the shadow set for each.
• A clipped shadow. It stops at a straight line because the subject touched the edge of the frame. Add room.
• A shadow on a picture that should have none. Some listings and documents want a cutout on plain white with no shadow, and a shadow there breaks the rule. Where a marketplace or a printer states a requirement, follow theirs rather than this page.

Where the shadow should and should not go

A shadow suits a cutout that is going to sit on a page, a poster, a slide or a product listing where a soft one is allowed. It helps most where the background is a flat colour and nothing else in the picture tells the eye what the subject is standing on.

Leave it off when the cutout will be laid over a photograph that already has its own shadows for the subject to match. There, the shadow depends on the surface it falls on, which the outline cannot know, and a shadow that has to bend over steps or a curved wall is better done in the editor, where you can place it on that surface. Leave it off too for anything going onto fabric, a decal or a printed transfer, where a faint grey shadow becomes a visible smudge. PNG for shirts explains why a print is a different job from a screen.

If you add it in the editor instead, the principle is the same: a soft shape, low strength, dark at the point of contact and fading away from it.

The short version

A drop shadow works when three things agree with the picture: it falls the same way as the other shadows, it is soft enough that no edge shows, and it starts where the subject touches the ground. Keep the strength moderate, leave room round the subject so nothing is clipped, and look at the result at full size on the background it will really sit on. getPNG builds the shadow from the cutout’s outline and saves it into the PNG, and how to take product photos covers getting the photograph right in the first place.

The steps, in short

1. Cut the subject out first. Drop the photo on getPNG and check the edge on a colour close to where the cutout will sit. A shadow drawn from a ragged outline is a ragged shadow.
2. Switch the drop shadow on. Open the Shadow tab and switch on Drop shadow. It starts soft and well short of black, which is the right place to begin.
3. Aim it with the angle. Find where the other shadows fall in the picture the cutout is going onto, and set the angle so this one falls the same way. Ninety degrees is straight down.
4. Soften it and bring it close. Raise Softness until no edge is visible, lower Distance until the shadow starts at the point of contact, and keep Strength moderate.
5. Check it on the real background, then download. Look at the shadow at full size on a colour like the final background, leave room round the subject so nothing is clipped, and download the PNG.

Questions

How do I add a drop shadow to a PNG?

Any editor with layers can do it, and so can getPNG, which builds a shadow from the cutout's outline and saves it into the transparent PNG. Switch on Drop shadow and set strength, softness, distance and angle. The shadow is part of the file, so it travels with the subject into whatever you place it in.

Does a drop shadow work on a transparent PNG?

Yes, and it is the usual way to use one. The shadow is stored as part-transparent pixels beside the subject, so it darkens whatever sits behind it instead of carrying a background of its own. On a white page it reads as a grey shadow, and on a mid-tone it reads as a darker patch of the same tone.

Why does my drop shadow look fake?

Usually it is too hard, too dark, too far from the subject or aimed the wrong way. A shadow with a visible edge looks like an outline, a black one looks like a cut-out held above the page, a distant one looks detached, and one that disagrees with the other shadows in the picture contradicts the scene. Soften it, lower the strength, bring it close and match the light.

What angle should a drop shadow be?

The one that falls away from the light. In getPNG the angle is in degrees clockwise from the right, so 90 is straight down, 0 is to the right and 180 is to the left. If a window or lamp lights the scene from the top left, the shadow falls down and to the right. On a plain white page with no scene to match, straight down is the safe choice.

Will the shadow be cut off at the edge of the picture?

It can be. The shadow is drawn inside the picture's own frame, so a subject that touches the edge of the photo has its shadow clipped there. Leave room with the canvas sizes, or place the cutout on a larger canvas, so the shadow has space to fade out.

Is the picture uploaded when I add the shadow?

No. getPNG runs on your own device, so neither the photo nor the shadow is sent anywhere. The shadow is built from the cutout's outline in your browser.