Screenshot Beautifier
Put a screenshot on a gradient background with padding, rounded corners and a soft drop shadow.
Drag & drop a screenshot here, or click to browse
No uploads. Your files stay on your device.
How it works
Drop a screenshot and it is instantly placed on a gradient background with padding, rounded corners and a soft drop shadow. Tap a background swatch to see the colours themselves rather than reading their names, or take one of the quick looks โ blog post, Twitter/X card or slide โ which set the background, ratio, padding, corners and shadow in one go. Copy image puts the finished picture straight on your clipboard, ready to paste into Slack, a pull request or a post โ the look people expect in blog posts, changelogs, README files and social media images. Every slider re-renders the preview immediately, and the whole composition is drawn on an HTML canvas inside your own browser, so your screenshot is never uploaded to a server and nothing is stored.
Padding is a percentage of the screenshot's longest side, so the same setting looks consistent
across images of different sizes. Pick an output ratio when you need a fixed frame โ 16:9 for
slides and YouTube thumbnails, 1:1 for a square post, 9:16 for a story โ and the background is
extended around the centered screenshot instead of cropping it. Switch the window bar on for a
macOS-style title bar with traffic-light dots. The download is always a PNG so the rounded
corners stay sharp and a transparent background stays transparent; Copy CSS gives you the
equivalent padding, background, border-radius and
box-shadow rules if you would rather build the frame in HTML.
Frequently asked questions
How do I add a background to a screenshot?
Drop your screenshot on this page, pick one of the gradient presets (or choose Solid color and pick your own) and drag the padding slider until the background frame looks right. The preview updates instantly and the Download PNG button saves the result at full resolution.
How do I add a shadow and rounded corners to a screenshot?
Use the corner radius slider to round the screenshot's corners and the shadow slider to set how strong the drop shadow is, where 0% turns the shadow off. Both are drawn straight onto the exported PNG, so the effect survives being pasted into a blog post, slide deck or README. Copy CSS gives you the matching border-radius and box-shadow rules if you would rather do it in HTML.
Is my screenshot uploaded to a server?
No. The whole composition is drawn with the HTML canvas API inside your own browser, so the file never leaves your device and nothing is stored or logged. That matters for screenshots of dashboards, emails or internal tools, and it also means the tool keeps working offline once the page has loaded.