Screenshot Beautifier
Add padding, a gradient background, a browser frame and a slight tilt to any screenshot, then export a clean image.
Ignored for PNG.
Drop an image here
or paste a screenshot with Ctrl+V. Nothing is uploaded.
Everything here runs on your device. Nothing you enter is uploaded or stored.
A screenshot straight off a phone or a desktop is a rectangle of pixels with nothing around it, and pasted directly into a document or a slide it looks exactly like that: functional, not designed. This tool adds the padding, background, framing and slight tilt that turns a flat capture into something that looks composed, without leaving the browser.
How to use it
- Paste a screenshot with Ctrl+V, drop a file onto the panel, or press Choose an image.
- Pick a background: a gradient preset, a solid colour, or transparent.
- Set the padding, add a window or browser frame if it helps, and dial in a small tilt if you want one.
- Press Download for a file, or Copy to place the finished image straight on the clipboard.
The corner that almost every version of this tool clips
Tilt is the feature that separates a working version of this tool from a broken one, and the failure is not obvious until you test it. Rotate a rectangle by any angle that is not a multiple of 90 degrees and its bounding box grows — the corners swing outward and reach further than the untilted shape did in either direction. A canvas sized to the screenshot’s own dimensions has no room for that, so the corners get sliced off the moment a tilt is applied.
The fix is to calculate the rotated extent before sizing anything: for a rotation of θ degrees, a box of width w and height h needs |w·cosθ| + |h·sinθ| of horizontal room and the equivalent vertically. This tool solves that first and builds the canvas to fit, so a 12-degree tilt on a wide screenshot never trims a corner regardless of the shot’s own proportions.
Padding that reads the same on a wide shot and a tall one
Padding here is a percentage of the screenshot’s longest edge rather than a fixed pixel value or a percentage of both dimensions independently. That single choice is why a 1600×400 browser capture and a 400×1600 phone screenshot both get margins that look intentional rather than arbitrary — the padding scales with the shape that actually defines how large the image reads, not with an axis that happens to be short.
Where the shadow actually lives
A drop shadow drawn inside the same bounds as the screenshot gets clipped on whichever side is closest to the canvas edge, and a clipped shadow reads as a hard line rather than a soft one — the single most common visual bug in tools like this. The padding here is a real part of the composition rather than empty space: the shadow is drawn into it, sized and offset in proportion to the image, so it has somewhere to fall off to zero instead of being cut short.
Frames without imitating an operating system
The window and browser frames are deliberately generic — three dots and, for the browser variant, an address bar — rather than a pixel-accurate copy of any specific OS chrome. That keeps the result usable for any screenshot without looking dated the moment a real operating system changes its own title bar design, and it avoids reproducing anyone’s trademarked interface.
Transparency, and the one format that cannot hold it
Export to PNG or WebP if you need the background to stay see-through — both support an alpha channel. JPEG does not, and asking for it fills the transparent area solid black rather than failing loudly, which is exactly the kind of silent surprise this page warns about before it happens rather than after.
Everything here runs on your own device using Canvas. The screenshot is never uploaded, and nothing about the image leaves your browser at any point.
Questions
Why does the canvas get bigger when I add a tilt?
Rotating a rectangle by any angle other than a right angle increases the space it occupies — a tilted screenshot's corners reach further out than the original box. If the canvas stayed the same size, those corners would be cut off. This tool calculates the rotated bounding box first and sizes the canvas to it, so a tilt never clips a corner.
Why is there a warning about shadows on a transparent background?
A drop shadow is a soft gradient of dark pixels, and on a transparent export those pixels get baked into the file permanently. That looks right if you place the image on a background close to the colour the shadow was drawn against, and wrong on anything else. If you want a shadow that always looks correct, export onto a solid or gradient background instead of transparent.
What is the browser frame's address bar for?
It is a text field drawn into the frame, not a real browser — you type whatever you want it to show, typically the URL the screenshot is of. It exists so a screenshot of a website reads as a website rather than a bare rectangle of pixels, which matters in tutorials, release notes and landing pages.
Can I get the image straight onto my clipboard instead of downloading a file?
Yes, if your browser supports writing images to the clipboard. Press Copy instead of Download and the composed image is placed on the clipboard as a PNG, ready to paste directly into a document, an email, or a chat. Where that API is unavailable the button says so and Download still works.
Last updated