How to add a realistic shadow to a transparent PNG

A transparent PNG with no shadow often looks like a sticker floating above the page. Adding the right shadow is the fastest way to make it look like it belongs in the scene, whether that scene is a menu, a product banner or a presentation slide.

There are three kinds of shadow worth knowing, and each takes less than a minute to create.

The three shadows that matter

1. Contact shadow. A small, dark, soft shadow right where the object touches the surface. It is the most important one. Without it, objects look like they are hovering, even if everything else is perfect.

2. Drop shadow. A soft copy of the object's outline, offset slightly down and to one side. It suggests the object is lifted a little above a flat background, which suits cards, icons and stickers.

3. Cast shadow. The shadow the object throws onto the floor or wall, stretched away from the light. It adds realism to photographic scenes but takes a bit more work.

For most designs, a contact shadow alone, or a contact shadow plus a subtle drop shadow, is enough.

Before you start: find the light

Look at the PNG and decide where the light comes from. Highlights on the left and darker areas on the right mean the light is on the left, so shadows should fall to the right. Getting this direction wrong is the most common reason a shadow looks fake.

If you are combining several images, choose ones lit from the same side. Our food PNG guide shows how much this matters when you place several dishes on one menu.

Canva

Drop shadow

1. Select the PNG.
2. Click Edit (or Edit image) and choose Shadows.
3. Pick Drop and open its settings.
4. Set Offset low (about 10 to 20), Blur fairly high (40 to 60), Transparency high (70 to 85), and a direction that matches the light.

Canva's shadow follows the transparent outline of the PNG, so it looks natural even on irregular shapes.

Contact shadow

1. Add an ellipse from Elements and colour it black.
2. Squash it so it is wide and flat, about the width of the object's base.
3. Lower its transparency to around 30 percent.
4. Place it under the object and send it backward with Position → Backward.

Canva cannot blur shapes directly, so a softer result comes from using a gradient circle element instead of a solid ellipse; search Elements for "blur circle" or "gradient circle".

Figma

1. Select the PNG layer.
2. In the right panel, click + next to Effects and choose Drop shadow.
3. Set X to 0–8, Y to 8–20, Blur to 24–40 and the colour to black at 15–25 percent.

For a contact shadow, draw an ellipse, fill it with black at 40 percent, add a Layer blur of 8 to 16, and place it directly below the object.

Figma's drop shadow respects the PNG's transparency, so you can stack two shadows: a tight, darker one close to the object and a wide, faint one further out. That combination looks far more natural than a single shadow. Our Figma guide has more tips for working with PNGs there.

Photoshop or Photopea

Drop shadow with a layer style

1. Double-click the PNG layer to open Layer Style.
2. Tick Drop Shadow.
3. Set Blend Mode to Multiply, Opacity 25–40 percent, Distance small, Size large.
4. Untick Use Global Light if you want a different angle for this layer only.

Realistic cast shadow

1. Ctrl/Cmd-click the PNG layer thumbnail to select its shape.
2. Create a new layer below it and fill the selection with black.
3. Press Ctrl/Cmd + T, then right-click and choose Distort. Drag the top handles down and away from the light so the shadow lies on the floor.
4. Apply Filter → Blur → Gaussian Blur (6 to 15 pixels).
5. Lower the layer opacity to 30–50 percent.
6. Add a layer mask with a gradient so the shadow fades as it gets further from the object.

Real shadows are sharpest and darkest close to the object and become softer and lighter further away. The gradient mask recreates that.

PowerPoint and Google Slides

In PowerPoint, select the image, open Picture Format → Picture Effects → Shadow, and choose an Outer shadow. Open Shadow Options to lower transparency and increase blur. Perspective shadows from the same menu create a quick cast shadow.

Google Slides offers Format options → Drop shadow with angle, distance and blur. It has no perspective shadow, so add a blurred ellipse image under the object if you need grounding. See using transparent PNGs in PowerPoint and Google Slides for more.

Shadow settings that look natural

• Colour: never pure black at full strength. Use black at 15–40 percent, or a darkened version of the background colour.
• Blur: larger than you think. Hard-edged shadows only exist in direct sunlight.
• Offset: small. A big offset makes objects look like they are floating high above the page.
• Consistency: every object on the design should have shadows at the same angle and softness.

Common mistakes

• Shadows on the light side of the object.
• A drop shadow on an object that should be resting on a surface; use a contact shadow instead.
• Different shadow directions for objects in the same scene.
• Shadows around a PNG that still has a white halo. Clean the edge first; our guide to removing white edges explains how.

Shadows are subtle by nature. If you notice the shadow before you notice the object, it is too strong. Pull the opacity down until the object simply looks like it is there.