Adding Realistic Drop Shadows to Product Images with the PixelAPI Shadow Generator

A few months ago I was building a product listing page for a small Shopify store. The client had decent product photos — white-background PNGs, cleanly cut out — but when you put them on a white page, everything looked flat. Like the products were just floating there with no weight. Classic problem.

My options were: manually add shadows in Photoshop for 200 SKUs, hire someone to do it, or find a programmatic solution I could slot into the image pipeline. I went with the third option, and ended up landing on PixelAPI's product shadow generator.

Why shadows matter more than you'd think

A drop shadow is one of those visual details that you don't consciously notice when it's done right, but immediately notice when it's missing. Your brain uses shadow to infer that an object has mass and a relationship to a surface. Without it, product images look cut-and-pasted, even if the cutout itself is perfect.

For e-commerce specifically, this has a real downstream effect. Products with a natural studio-style shadow look more polished and trustworthy. It's not magic — just basic visual hierarchy.

The problem is that good shadows are tedious to generate at scale. The angle, softness, opacity, and spread all need to look natural, and they should ideally be consistent across a whole catalog. That's a lot of manual work to do correctly.

Plugging it into a real pipeline

PixelAPI exposes the shadow generator as a simple REST endpoint. Here's roughly how I integrated it into a Node.js image processing script that ran against the client's product image folder:

import fs from "fs";
import path from "path";
import fetch from "node-fetch";
import FormData from "form-data";

async function addShadow(imagePath) {
  const form = new FormData();
  form.append("image", fs.createReadStream(imagePath));

  const response = await fetch("https://pixelapi.dev/api/shadow-generator", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.PIXELAPI_KEY}`,
      ...form.getHeaders(),
    },
    body: form,
  });

  if (!response.ok) {
    throw new Error(`Shadow generation failed: ${response.statusText}`);
  }

  const buffer = await response.buffer();
  const outputPath = imagePath.replace(".png", "_shadow.png");
  fs.writeFileSync(outputPath, buffer);
  console.log(`Saved: ${outputPath}`);
}

async function processFolder(folderPath) {
  const files = fs.readdirSync(folderPath).filter((f) => f.endsWith(".png"));
  for (const file of files) {
    await addShadow(path.join(folderPath, file));
  }
}

processFolder("./products");

This ran through 200 product images in a few minutes. The output was consistent across all of them — same shadow angle, same softness — which gave the product grid a cohesive studio-photo look.

What the output actually looks like

The shadow the API generates is a soft drop shadow that sits slightly below and behind the product. It's not a harsh outline-style shadow — it has a realistic falloff and a slight perspective component that makes it look like the product is resting on a surface rather than floating.

For product images that already have a transparent background (PNGs with alpha), it works best because the API can detect the actual edges of the object and cast the shadow accordingly. If you feed it a JPEG with a white background, results vary depending on how much contrast the product has against the background.

Where I've found it most useful

Catalog images for e-commerce: This is the obvious one. If you're running a pipeline that processes product uploads, dropping shadow generation in as a post-processing step is straightforward and gives consistent results without manual work per product.

Logo mockups and brand assets: When a client sends a flat logo PNG and wants to see it on a surface — business card, poster, app icon — the shadow generator gives it weight and context quickly. Not a replacement for a full mockup tool, but fast for quick previews.

Content creator assets: I've used it for YouTube thumbnails where you want product images to pop against a colored background. The shadow grounds the product and creates depth without having to open a design tool.

Agency batch work: When you're processing assets for multiple clients, having this as an API call means you can standardize shadow treatment across everything without per-project manual work. Build it into your asset delivery workflow once and it runs automatically.

Gotchas worth knowing

The output quality depends heavily on the input. Cleanly cut-out PNGs on transparent backgrounds get the most natural results. If the original image has fringing or rough edges on the cutout, the shadow will follow those edges and look slightly off.

Also, the generated shadow is baked into the returned PNG — you get back a flat image with the shadow composited in, not a separate shadow layer. That's fine for most use cases, but if you're building something where you need to adjust the shadow post-generation, that's worth keeping in mind.

Why I kept it in the stack

The main thing that made me keep using it is that it fits cleanly into an automated pipeline. It's one POST request, you get an image back, done. There's no GUI to open, no manual adjustment step, no exporting. For batch work at any scale, that composability matters more than having every possible configuration option.

The free tier is generous enough to cover experimentation and small projects, and the API is simple enough that integration is a few lines of code rather than a whole dependency tree.

If you're working on any kind of product image pipeline, it's worth adding to your toolbox. The shadow effect itself is good, but the real value is that it handles a tedious, fiddly task automatically and consistently — which is what you actually want from an API.