Drop Shadow
Add configurable drop shadows to images with full control.
Drop Shadow adds a configurable shadow behind an image — "Add configurable drop shadows to images," per the card. Offset X/Y, Blur, Opacity %, Spread, and Color cover the classic box-shadow vocabulary, with defaults (offset 4/4, blur 10, black at 50%) that look right out of the box. "Apply Shadow" bakes the effect and shows Original vs Result sizes.
The output canvas grows to make room for the shadow (padding of |offset| + blur + spread on each side), so expect larger dimensions than the source. A unique "Share" button copies a URL with a #config= hash encoding your form values — collaborators reload with the same controls, though never your pixels. All rendering is local canvas shadow API.
How it works
The canvas is padded by |offset| + blur + spread, then the shadow is drawn with ctx.shadowOffsetX/Y, shadowBlur, and shadowColor. With Spread > 0 an extra filled rectangle carries the shadow for a sticker-like slab; otherwise the shadow follows the image alpha. The image is drawn on top, and toBlob writes PNG for PNG sources (else JPEG 0.92).
State lives in Redux dropShadowSlice. On mount, encodeToolConfig/decodeToolConfig reads a shared #config= hash so a pasted link restores settings. "Share" copies shareableUrl — form values only, no image data. Success toasts: "Drop shadow applied!", "Link copied!" for the share action.
How to use
- Drop an image into the upload zone.
- Adjust Offset X (−100..100), Offset Y (−100..100), Blur (0..50), Opacity % (0..100), Spread (0..50), and Color.
- Optionally open a shared link first — the #config= hash loads settings on mount.
- Click "Apply Shadow" (label becomes "Applying...").
- Compare the Original and Result size stats — the result is padded for the shadow.
- Download the image, click "Share" to copy the settings link ("Link copied!"), or "Start Over" to reset.
Tips
- Output is always larger than the input — the extra padding is what gives the shadow room to fall.
- Spread > 0 adds a solid offset slab behind the image for a sticker-style shadow.
- Share encodes controls, not pixels — recipients get the same sliders, then apply to their own image.
- Black at 50% opacity with blur 10 is the classic default; nudge Opacity % down for softer depth.
- "Could not read image dimensions" means a decode failure — re-export the source and try again.
Drop Shadow FAQ
Does the output image get bigger?
Yes — the canvas is padded around the image so the shadow has space to render.
What does Share copy?
A URL whose #config= hash encodes the form settings (shareableUrl) — no image data is included.
Can the shadow be transparent (for PNG)?
PNG sources export as PNG and keep alpha; JPEG sources re-encode without transparency.
Is the image uploaded?
No — canvas shadow rendering is entirely local.
How do I remove the shadow?
Adjust the settings and Apply again, or click "Start Over" to clear the workflow.
Credits
- Canvas 2D API — shadowOffset/shadowBlur/shadowColor rendering
- shareableUrl helper — Encodes form config into the #config= URL hash