Screenshot Beautifier

How to use it

1. Load a screenshot: drag it in, pick it with the button, or paste it — ⌘/Ctrl + V anywhere, or the clipboard button, which asks this browser's permission before reading anything.
2. Pick a frame and a background. Frames are stylized generic chrome, not brand device mockups; backgrounds span curated gradients, transparency and any custom hex.
3. Tune padding, corner radius and shadow against the live preview; browser frames also take an address-bar caption, drawn into the url slot — never linked or fetched.
4. Optionally choose a platform-cited target size, then press Export PNG (or ⌘/Ctrl + S) — the file downloads with its byte size labeled.

Drop or paste a screenshot and it lands inside a stylized window frame on a curated gradient — padding, corner radius, shadow and an optional address-bar caption adjust against a live preview, and one click exports a share-ready PNG at 1× or 2×. Composing happens in your browser on this device; keep the DevTools Network panel open and watch no bytes leave.

How it works

Every render starts as a plan: a pure function turns the screenshot's dimensions plus the controls into an ordered list of draw operations — background, shadow, rounded clip, frame chrome, image, caption text — and a small executor replays it onto a canvas. Preview and export replay the same plan, so what you see is what downloads; captures above 2,048 px render in a worker so the page never stalls.

The 2× option serves high-density screens, where embeds display an image at half its pixel count — doubled pixels keep frame edges and captions crisp. Chrome draws sharp at any scale, but interpolating the screenshot itself cannot add sharpness — a warning says so whenever a 2× export stretches the screenshot past its native pixels.

Target presets follow a fit-with-letterbox law: the canvas becomes exactly those pixels — 1200×630 for a link card — and the framed composition scales uniformly to fit inside, centered. Nothing is cropped; when the shapes differ, the background paints the leftover bars and a notice states it. A chosen target also pins the scale — the 1×/2× toggle drives free-size exports only.

Examples

1200×750 app screenshot · browser frame · Wing gradient · 64 px padding · soft shadow

1328×922 px PNG
ops: fill → shadow → clip → fill → fill → circle → circle → circle → fill → image

1170×2532 phone screenshot · phone frame · Night gradient · heavy shadow

1302×2716 px PNG
ops: fill → shadow → clip → fill → fill → circle → fill → image

1000×500 screenshot · no frame · Ink · OG card target (1200×630)

1200×630 px PNG
ops: fill → image
The 1200×630 px target is a different shape than the 1,064×564 px composition — it is scaled to fit and the background fills the remaining bars.

800×500 screenshot · dark browser frame · caption text · 2× export

1728×1216 px PNG
ops: fill → clip → fill → fill → circle → circle → circle → fill → image → text
A 2× export cannot add sharpness — the 800×500 px screenshot is interpolated up to 1,600×1,000 px. Pixels are invented, not recovered; drop a retina-resolution capture for a truly crisp 2× file.

Every example on this page is executed against the same engine that powers the tool, on every build.

Common errors

Address-bar text is limited to 60 characters — this one is 72.

The caption suggests a location, not a full query string — 60 characters is what the drawn url slot carries legibly, and the message counts your actual text.

This file is larger than the 20 MB limit for this tool. For heavier captures use the CLI: magick screenshot.png -bordercolor none -border 64 -background 'gradient:#4f46e5-#0ea5e9' -flatten framed.png

Files above 20 MB are refused before any decode starts — nearly always an uncompressed capture of a very large display. Re-export at screen size, or run the printed ImageMagick line, which pads and flattens locally.

This plan resolves to a 10,624×10,624 px canvas — larger than the 10,000 px per-side export limit. Lower the padding, export at 1×, or pick a target preset.

Padding and the 2× scale multiply: a 4,800 px source with maximum padding doubled lands past the 10,000 px per-side cap. Any of the three suggestions brings the plan back inside.