Border & Shadow
Add a solid border and/or a soft drop shadow around an image.
How to Use
- Drop an image into the drop zone (or click it to browse for a file).
- Set Border width and Border color to add a solid frame around the image (set width to 0 for no border).
- Adjust Shadow blur, Shadow X, and Shadow Y to control how soft and how offset the drop shadow is.
- Use Shadow α to control shadow opacity, and BG color to set the color that shows behind the framed image.
- The preview canvas updates live as you drag any slider.
- Click Download to save the framed image as a PNG.
Tips
About the Border & Shadow
Meet the Border & Shadow: a free, no-fuss tool for image, audio and file tasks with nothing to install and no sign-up. Add a solid border and/or a soft drop shadow around an image.
How it works
Type in what you have, and the answer shows up right away. Change anything and it updates by itself. Everything runs in your browser, so it is fast and nothing you type is sent away.
Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.
Frequently Asked Questions
What size is the output image?
The canvas automatically expands beyond the original image dimensions to fit the border and the full shadow (including its blur radius and X/Y offset), so nothing gets clipped. The exact output size depends on your border width and shadow settings.
Why does the shadow look cut off at the edge?
It shouldn't — padding is calculated from the shadow blur plus the larger of the X or Y offset, symmetrically on all sides, specifically so the shadow always has room to render fully. If you see clipping, try increasing shadow blur or offset values, which recalculates the canvas size.
Can I use a transparent PNG as input?
Yes — the tool draws your image on top of the BG color layer, so if your source PNG has transparent areas, the BG color will show through them in the final composite, similar to placing the image on a colored mat.
Is the shadow a true Gaussian blur?
Yes — it uses the canvas 2D context's native shadowBlur, which browsers render as a Gaussian-style soft shadow, the same approach used for CSS box-shadow blur.
Are my images uploaded anywhere?
No. The border and shadow are drawn entirely with the HTML5 canvas API in your browser — nothing leaves your device.
How do I use the Border & Shadow?
Just type your numbers. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Do I need to install or sign up for anything?
Not at all — it runs in the browser with nothing to install and no account. After it loads once, it even works without an internet connection.
Is my information private?
Yes. Everything happens in your browser. Nothing you type is sent to a server or saved anywhere.
Common Use Cases
Screenshot framing
Add a clean border and soft shadow to app or website screenshots for a polished, presentation-ready look.
Product photography
Give a product shot depth and separation from its background with a subtle drop shadow.
Portfolio and case study images
Frame design mockups or before/after images consistently before dropping them into a deck or webpage.
Social media posts
Add a matching border and background color so an image stands out cleanly in a feed.
Last updated: