Screenshot Beautifier

Wrap screenshots in padding, gradient backgrounds, and rounded corners.

This tool runs entirely in your browser. Your data is never uploaded, never stored, and never leaves your device.

Frames a bare screenshot into a pretty one, setting it on a diagonal gradient with rounded corners and a drop shadow, which is what turns a raw window capture into something that sits properly in a slide, a changelog entry or a social card.

How to use it

1Drop your screenshot onto the drop zone.
2Pick a Background from the six gradients — Indigo, Sunset, Ocean, Forest, Slate or Candy.
3Drag Padding (0–200px) and Corner radius (0–64px) until it looks right, then press Download PNG.

Example

Input: A 1200 × 800 screenshot, Indigo, padding 60, corner radius 16
Output: beautified.png at 1320 × 920 — the shot inset 60px inside an indigo-to-purple gradient, corners rounded by 16px

Padding is added on all four sides, so the canvas grows by twice whatever you set. The shadow is derived from the same figure — blur is half the padding, the vertical offset is 15% of it — so dragging padding down to 0 takes the shadow away with the frame. The gradient always runs corner to corner across the finished canvas, so its angle shifts with the shape of your screenshot.

What happens to your data

Nothing here mints a link. Both gradient stops come from a fixed table compiled into the page, the frame is a short run of canvas calls — gradient fill, rounded rectangle, clip, draw — and the finished PNG is a data URI held in component state. Every nudge of a slider recomputes that string and drops the previous one, so the intermediate versions you scrub past are not queued, not stored and not sitting on a host somewhere waiting to be shared.

Last updated August 2026

The screenshot is fine; the slide it lands in is not. A raw window capture arrives as a hard-edged rectangle in roughly the same greys as most application chrome, so it either dissolves into a white slide or sits on it looking pasted in. The fix is rarely to edit the screenshot at all: give it a margin, a background and a shadow, and the eye reads it as a picture of a thing rather than part of the page.

Two different jobs get called the same thing, and it is worth knowing which you want. The first is framing: padding, a coloured ground, rounded corners, a shadow, with the shot untouched in the middle. The second is a mockup: the image dropped inside a fake browser window with a title bar and traffic-light dots, or a phone bezel, or tilted in perspective. This does the first. There is no window chrome, no device frame and no tilt, so a changelog style built on a fake Safari bar needs something else.

Settle the capture before you settle the frame, because nothing here rescales it. Padding is measured in the pixels of the file you dropped in, so one setting is a generous border around a 400-pixel-wide crop and a thin line around a 3,000-pixel retina capture. Crop to the part you want looked at: a whole 27-inch desktop shrunk into a slide is unreadable however carefully it is framed.

How it works

Toolvore builds the frame with a short run of canvas drawing calls at the full resolution of the file you dropped in: a canvas is sized to your image plus the padding on each side, filled with a two-stop linear gradient, given a white rounded rectangle where the screenshot will sit, and the shot drawn into it through a clip path. Nothing is resampled — the pixels that went in come back at 1:1 — so a frame can never rescue a soft capture. The shadow is a single canvas shadow beneath that white rectangle rather than the layered, multi-blur shadow a design tool would build, and both its blur and its offset derive from your padding, so a wide margin with a tight shadow is not available. The white rectangle matters too: it sits behind the image, so a PNG with transparency shows white rather than the gradient. And the whole composite is rebuilt at full size on every slider movement, so a very large screenshot makes dragging feel heavy.

Common use cases

Dropping a product screenshot into a launch slide
Changelog entries where a bare capture looks unfinished
Open Graph cards built around a screenshot
A README hero image above the install steps
Giving a run of documentation screenshots one background
Framing a dashboard chart exported for a board pack

Frequently asked questions

How do you make a screenshot look good in a presentation?＋

Crop to one idea per shot, and capture on the highest-density display you have, or zoom the application first, so the image is at least as large as it will be shown. Then give it separation from the slide: a margin, a ground it does not blend into, and a shadow so it reads as a layer. Keep interface text large enough to survive the back row: zoom before capturing rather than scaling afterwards. Use one treatment across the deck: mixed backgrounds and mismatched corner radii make a set look assembled by different people.

How do I capture just one window instead of the whole screen?＋

On macOS, Cmd+Shift+4 followed by the space bar turns the pointer into a camera: click a window and only that window is captured. Holding Option as you click leaves out the system drop shadow, which is worth doing when you are about to add a shadow of your own, since two stacked shadows look muddy. On Windows, Alt+PrtScn copies the active window to the clipboard, and Win+Shift+S opens the snipping overlay, which has a window mode alongside the rectangular one. Before capturing, silence notifications and hide the bookmarks bar — those are the details reviewers notice.

Why does my screenshot look blurry after I upload it somewhere?＋

Two causes, with different fixes. The first is enlargement: a capture taken at 1x and shown at twice the size has no extra detail to reveal, so it goes soft. Capture on a high-density screen, or zoom the application before capturing, so the pixels exist at all. The second is recompression — many platforms re-encode uploads as JPEG, which smears the sharp edges of text and interface lines. A larger, cleaner PNG gives that re-encoder more to work with. Framing changes neither: the image is drawn at its own size, so a soft capture stays soft.

Should screenshots be saved as PNG or JPEG?＋

PNG, for anything that is mostly interface. Screenshots are flat colour and hard edges, which lossless compression handles well and JPEG handles badly — JPEG leaves faint haloes around text, softens thin lines, and often saves little on a screenshot anyway. JPEG earns its place on photographs. The output here is always PNG whatever you drop in, saved as beautified.png, so a JPEG photo comes back as a PNG usually heavier than the file you started with. For an interface capture that is the right trade; for a photograph, re-encode it afterwards.

Is my screenshot uploaded anywhere?＋

No. The file becomes a local object URL, is decoded into an image element and drawn onto a canvas inside the tab you are looking at; the finished frame is a data URI held in the page's state, and the Download button is a link to that string, not to a server. No request carries the picture anywhere, there is no account, and the object URL is released when you swap files or leave the page. Redrawing on a canvas copies pixels and nothing else, so metadata the original carried is absent from the PNG you download.

How do I hide sensitive information in a screenshot before sharing it?＋

Crop it out rather than cover it. Blurring or pixelating short, predictable text — a card number, an email address, an account id — is weaker than it looks, because the set of possible originals is small enough to search. A solid opaque rectangle, or a crop that removes the region, leaves nothing to recover. Better still, avoid capturing it: use a demo account, invented data, and close panels showing real names. This tool frames and nothing else — no crop, no blur, no redaction — so whatever is legible going in is legible in the download.

Why is there white behind my transparent PNG instead of the background?＋

Because a white rounded rectangle is painted where the screenshot goes, and the image is drawn on top of it. With an ordinary opaque window capture you never see it; it is there so the shot sits on something solid and the shadow has an edge to fall from. A PNG with transparent areas is different — white shows through them, not the gradient — so a logo exported on a transparent background ends up looking like it is on a card. If you want the gradient behind those areas, capture the element on the background you want instead.

What background colour works best behind a screenshot?＋

Contrast with the interface, not with your brand. A light application on a pale ground loses its edges, and a dark-mode capture disappears into a dark one, so pick the direction that keeps the boundary visible — the presets here run from bright gradients through to a dark slate, which is the one that suits light UI screenshots. Think about where it will be seen: a white slide master, or a feed where readers are in dark mode. A busy, colourful interface wants the calmest ground available, since two strong colour schemes fight.