How to Add a Drop Shadow to an Image — Free Online Tool

What Is a Drop Shadow?

A drop shadow is a visual effect that creates the illusion of depth by placing a soft shadow beneath or behind an image. It simulates natural light casting a shadow onto a surface below the object.

Drop shadows are used to:

• Make product photos appear to “float” above the background
• Add depth to logos, icons, and text overlays
• Create professional presentation layouts and mockups
• Separate an image element from its background visually
• Simulate studio photography lighting effects

Types of Shadows

How to Add a Drop Shadow Online

1. Open Image Editor on PPImage
2. Upload your image (PNG with transparent background works best)
3. Find the Shadow or Effects panel
4. Choose “Drop Shadow”
5. Adjust the settings:
   • Offset X/Y: Controls the direction and distance of the shadow
   • Blur: Higher blur = softer, more diffused shadow
   • Opacity: How dark/visible the shadow is (20–60% is typical)
   • Color: Usually black or dark gray; warm brown for warm-toned scenes
6. Preview and download as PNG to preserve the transparent background

Drop Shadow Settings Guide

For Product Photography

Product photos benefit from a subtle, realistic shadow:

• Offset X: 0–5 px (minimal horizontal offset)
• Offset Y: 5–15 px (shadow falls directly below)
• Blur: 20–40 px (soft, diffused)
• Opacity: 20–40% (subtle, natural)
• Color: Near-black (#1a1a1a or similar)

This creates the impression the product is resting on a surface with studio lighting.

For UI Screenshots and Cards

Card elements in presentations and documentation use a more defined shadow:

• Offset X: 0–4 px
• Offset Y: 4–12 px
• Blur: 10–20 px
• Opacity: 30–50%

For Logos and Icons

Icons displayed on light backgrounds benefit from a soft shadow for separation:

• Offset X: 2–4 px
• Offset Y: 2–4 px
• Blur: 6–12 px
• Opacity: 25–35%

Drop Shadow for Product Photos

Adding a realistic shadow to product photos makes them look more professional and natural — as if the product is sitting on a real surface rather than floating on a white background.

Professional product shadow workflow:

1. Remove the background (use our Background Remover)
2. Export as PNG with transparent background
3. Add a drop shadow using the editor
4. If needed, add a subtle reflection effect (lighter version of the shadow below the object)
5. Place on a clean white, light gray, or colored background

This technique is used in e-commerce product photography at major retailers.

CSS vs Image Drop Shadow

If you are a web developer, you may not need to bake a shadow into the image file at all. CSS can apply shadows dynamically:

/* Box shadow (around the entire image box) */
img {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Filter drop shadow (follows shape of transparent PNG) */
img {
  filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.3));
}

Use CSS shadows when:

• Images are served from a CMS and you can’t pre-process them
• You want the shadow to respond to theme changes (dark mode)
• The shadow needs to animate on hover

Use baked-in shadows (edited into the image file) when:

• Images will be used outside of a web context (print, social media, documents)
• You need the shadow to be part of the image for email newsletters

File Format for Shadow Images

Always export with a drop shadow as PNG:
If your image has a transparent background, JPEG cannot store the transparency. The shadow would be cut off at the image edges or filled with white.

Export as JPEG only when:
The shadow is baked onto a solid background (white, gray, or colored), and transparency is not needed.

Try It Now

Add a professional drop shadow to your images using our free Image Editor. Works for product photos, logos, screenshots, and more — no software installation required.