Overview
Introduction
This tool adds a realistic drop shadow behind a PNG's visible content, entirely client-side using the canvas API and plain pixel math.
It's built for images with transparency, like logos, icons, or product cutouts, where a rectangular border wouldn't give the right effect.
What Is PNG Shadow Adder?
A drop-shadow generator that reads an uploaded PNG's alpha channel to build a tinted silhouette, blurs that silhouette with a box blur, offsets it in a chosen direction, and composites the original image on top using standard alpha-over blending.
The result looks like the subject is lifted slightly off the background, a common effect in UI design and product photography.
How PNG Shadow Adder Works
First, every non-transparent source pixel is copied into a new, larger canvas as a shadow-colored pixel whose alpha is scaled by the source pixel's own alpha and the chosen shadow color's opacity.
That silhouette is then blurred (if a blur radius is set) and shifted by the offset amount, and finally the original, unblurred image is composited on top at its own unshifted position.
When To Use PNG Shadow Adder
Use it to make a flat icon or logo look like it's floating above its background for a UI mockup, presentation slide, or social media graphic.
It's also useful for adding depth to product photos that have already had their background removed.
Often used alongside PNG Glow Effect Adder, PNG Stroke Adder and PNG Outline Adder.
Features
Advantages
- Runs entirely client-side; nothing you upload leaves your browser.
- The shadow traces your image's real alpha silhouette instead of a generic rectangle.
- Independent controls for offset, blur radius, and shadow color/opacity.
Limitations
- The blur is a box blur (an approximation of a Gaussian blur), so very large blur radii can look slightly different from a true Gaussian drop shadow.
- Very large offset or blur values expand the canvas substantially, which can be slow on large source images.
Examples
Best Practices & Notes
Best Practices
- Use a subtle offset (a few pixels) and moderate blur for a natural-looking shadow; large offsets tend to look unrealistic.
- Lower the shadow color's alpha for a softer effect instead of only relying on blur radius.
Developer Notes
The pure compositing math (building the tinted silhouette, reusing the existing box-blur lib function, and alpha-over compositing the original on top) lives in a lib function operating on plain Uint8ClampedArray pixel buffers with no DOM dependency; only the surrounding component touches an actual <canvas> element.
PNG Shadow Adder Use Cases
- Adding depth to a logo or icon for a UI mockup
- Making a product cutout look like it's sitting above the page
- Creating a floating-card effect for a graphic design asset
Common Mistakes
- Setting the blur radius too high, which can make the shadow look like a diffuse cloud instead of a shadow.
- Forgetting that a larger offset or blur expands the output canvas beyond the original image's dimensions.
Tips
- Combine a small offset with a larger blur radius for the most natural-looking soft shadow.
- Try a colored shadow (not just black) for a stylized glow-like effect.