How to use the Shadow Generator
- Drop a sprite.
- Choose drop shadow (offset copy behind the sprite) or cast shadow (flattened silhouette on the ground).
- Adjust offset or squash and skew, then color and opacity.
- Check it on the green, dark and light preview backgrounds.
- Download the PNG.
What you get
- PNG with the shadow baked in and a canvas that fits it
- Semi-transparent shadow with one alpha value (no stacking)
Tips from making games with it
- For a cast shadow, the sun direction is the skew: positive leans right, negative leans left. Keep it the same for every sprite in a scene.
- A colored shadow (dark purple or blue) usually looks better than black over grass or sand.
- If your engine draws shadows itself, export them separately: set opacity to 100% on a copy and use it as a mask.
- Spread grows the drop shadow by whole pixels, which reads as softness without adding blur.
Use cases
- Giving UI icons and buttons a pixel drop shadow
- Grounding characters and props in top-down and side-view scenes
- Making title text pop off a busy background
- Store page and trailer stills
FAQ
What's the difference between drop and cast shadow?
A drop shadow is the sprite's silhouette shifted by an offset, as if it floats above the background. A cast shadow is flipped, flattened and skewed below the sprite's feet, as if light hits it from the side.
Are the shadows blurred?
No. Edges stay hard. The spread option grows the silhouette by whole pixels instead of blurring it.
Why is the shadow semi-transparent?
So the ground shows through. Every shadow pixel gets the same alpha, so overlapping parts don't get darker.
Where does the cast shadow start?
At the lowest opaque row of the sprite, which is normally the feet. Use the gap setting if the sprite has empty space under it.
Is my image uploaded?
No. Everything runs in your browser.