What is a drop shadow?

A drop shadow is a soft, darker copy of an image placed behind it and a little to the side, as if the image floated above the page. It lifts product cutouts, logos, screenshots and photos off the background and gives flat designs some depth.

Tool description

Open an image, set how soft the shadow is with Blur, and move it with the horizontal and vertical offsets. Pick its color and opacity in the Color section. On a PNG or WebP with transparency, the shadow follows the shape of the subject, not the rectangle around it. A photo gets the shadow of its rectangle.

The canvas grows just enough to hold the whole shadow, and the download is a PNG with a transparent background, ready to place on any page or slide.

Features

  • Follows the shape of transparent images
  • Blur, offset, color and opacity
  • Canvas grows to fit the shadow, so nothing is cut off
  • Transparent PNG download

How it works

Blur works like the blur of a CSS shadow: a gaussian blur whose standard deviation is half the value. The shadow fades out about one and a half times the blur past the image's edge, so the canvas grows by that much on each side the shadow reaches past, counting the offset.

Tips

  • A blurry shadow straight below the image, with no horizontal offset, makes it look like it floats.
  • Keep the opacity around 30% to 50% for a natural look. No blur and full opacity give a flat, retro style instead.
  • On a colored page, a darker shade of the page's color looks more natural than black.
  • Keep PNG or WebP as the format to keep the transparent background. JPG puts the shadow on white.