How it works
The Image Shadow tool adds a configurable drop shadow to any image, making it appear elevated above the background — a common effect in UI mockups, marketing graphics, and product presentations. The output is a PNG with the shadow rendered as part of the image (not a CSS effect).
Drop shadows are used extensively in UI design to create depth and hierarchy. When embedding a screenshot into a slide deck or documentation page, a shadow makes the image look like a floating UI element. Product photos with shadows look more three-dimensional. Blog post featured images with subtle shadows look more polished.
How to use it: upload your image. Set shadow offset X and Y (how far the shadow is displaced from the image, in pixels), blur radius (how soft the shadow edge is), spread (how much the shadow extends beyond the image edges), and color (typically black or dark gray, with 20–40% opacity for realistic depth). The canvas automatically expands to fit the shadow. Download as PNG.
Shadow parameters: - Offset: 4–8px for subtle depth, 10–20px for dramatic elevation - Blur: 0 for a hard shadow (retro), 10–20px for soft (realistic), 30+ for diffuse (ambient occlusion style) - Opacity: 20–30% for natural, 50–70% for dramatic - Color: black for neutral, color-matched for creative effects
Note: this tool embeds the shadow in the image pixels. For web use, CSS box-shadow is more flexible. Use this tool when you need the shadow in the actual image file — for presentations, exports, and contexts where CSS isn't available.
Privacy: shadow rendering runs in the Canvas API. No upload required.
Frequently Asked Questions
- Offset X: 0, Offset Y: 6, Blur: 20, Opacity: 25%, Color: black. This creates a soft downward shadow that mimics natural overhead lighting. Increase offset Y and opacity for a more dramatic elevation effect.
- Flat (hard) shadow: blur radius 0–2, offset 4–8px. This creates a sharp, definite shadow with a visible edge — a retro or cartoon aesthetic. Soft shadow: blur radius 15–30, offset 6–12px. This creates a diffuse, natural-looking shadow.
- Download as PNG to preserve transparency in the expanded shadow area. JPG fills transparent areas with white — if the shadow has soft edges, white corners appear. PNG output preserves the alpha channel so the shadow fades naturally on any background.
- Yes. Click the shadow color picker and choose any color. Colored shadows are used for a retro duotone design aesthetic and for brand-colored glows around UI screenshots. A brand-color shadow at low opacity creates a subtle glow effect.