How to frame a screenshot without blurring it or leaking what is in it

A product screenshot on a gradient, with a little shadow and a browser bar, is the standard way to show software in a launch post, a changelog or a pitch deck. Three things usually go wrong on the way: the screenshot comes out softer than it went in, something private stays readable under a blur, and the file carries more than the picture. Each can be avoided, and the tool will tell you whether it was.

Make the image with the tool

1. Open the screenshot beautifier. It starts on a sample, a 2× capture of one of dsyn’s own pages, so the readouts have something true to show. Press Choose images, drop files on the box, or paste a screenshot straight from the clipboard. Several at once are fine.
2. Read the file panel. It lists the Stored size, the Pixel density the file declares and anything it carried, such as GPS. If the density is wrong, change Screenshot taken at.
3. Under Cover private details, drag across the preview to add a box, or press Add a box and type Left, Top, Width and Height in the screenshot’s own pixels. Each box is Frosted or Solid.
4. Under Frame and background, choose a Frame (Browser, Browser, dark, Window, Phone, Tablet or No frame), type the Address in the bar if you want one, and pick a Background: a gradient, Solid, Transparent, or the swatch built from the screenshot’s own edge colour. Padding from the screenshot’s size, Corners and Shadow do what they say. Canvas stays on Fit the screenshot unless the image is for a fixed slot such as a link preview.
5. Under Export, set Scale to the screenshot’s density and check the line under the readouts: it says either that the screenshot is placed pixel for pixel, or how far it was resized. Pixels, File and Written ppi are measured from the real file before you press Download PNG. With several screenshots, a Download all button makes one ZIP, the same style applied to each with each one’s own boxes.
6. Under Alt text, finish the sentence it starts, then Copy alt text into the post’s image description.

Pixel density decides whether anything is resized

Pixel density is how many stored pixels a screenshot spends on one pixel of the layout it shows. A Retina Mac captures at 2: a window 960 pixels wide on screen is saved 1920 pixels wide, and the file says so by recording 144 ppi, twice the 72 that macOS treats as one point per pixel. Recent phones capture at 3. Windows writes no resolution into a screenshot at all, so a file without one is treated as 1× until you say otherwise.

The arithmetic is simple. Exported at a scale equal to its density, the screenshot needs no scaling, and the tool copies each of its pixels to one pixel of the output at a whole-pixel position; only the anti-aliased rounded corners are blended. At any other scale every pixel is rebuilt from its neighbours. The tool does that once, with Lanczos3, and says so, but small text is never as crisp afterwards.

The sample (1920 × 1200, 144 ppi)	Output	What happens to the screenshot
Export at 2×	2240 × 1600 PNG, 192 ppi	All 2,304,000 pixels copied unchanged apart from the corner arcs
Export at 1×	1120 × 800 PNG, 96 ppi	Reduced to 50%
Link preview canvas	1200 × 630	Reduced to about 39% to fit, once

Other beautifiers scale by default. When we exported shots.so’s default layout with its “1x” setting, the file was 1920 × 1440 regardless of what was placed in it. screenshot.rocks draws its editor with dom-to-image at the canvas’s CSS size, with no scale setting, and MockUPhone resizes the screenshot with Pillow and then warps it with OpenCV, which resamples it twice. None of them writes a resolution into the PNG, so a 2× image opens in a slide app at twice its intended size.

A blur can be reversed; a cover cannot

Redaction means removing information from an image, not hiding it from a quick glance. Blurring or pixelating text replaces each pixel with a fixed mixture of its neighbours, which is a known function of the original. Known functions can be matched: the open-source Depix recovers pixelated passwords by comparing blocks with pixelated samples of known text, and a Gaussian blur is the textbook case for deconvolution. screenshot.rocks’s own guide advises cropping passwords out for this reason, since its blur has one fixed strength and it has no solid box.

So neither cover here reads what it covers. A Solid box is one colour. A Frosted box is filled from the colours just outside it, blended across the box with a fixed grain, so it looks like a blur while containing nothing from underneath. The test the tool is held to: change every pixel under four overlapping boxes, export again, and the file must be byte for byte the same. A 9 × 9 blur of the covered pixels fails it. Use Solid for keys, passwords and account numbers; Frosted suits names and avatars where a hole would draw the eye.

Check the address bar too. URLs often carry an account id, an email address or a token, and the Address in the bar is whatever you type, not what the screenshot showed.

What the file carries

A screenshot from a phone can carry a location, and a photo dropped in by mistake almost certainly does. The panel names what each file carries before anything is drawn. The download is encoded from pixels alone, so it has no EXIF, no GPS, no camera details and no colour profile; a Display P3 capture is converted to sRGB as the browser decodes it, rather than having its profile dropped, which is what makes colours look washed out in tools that skip the conversion.

Fixed sizes for social posts

Canvas offers fixed sizes taken from each platform’s own page, among them the 1200 × 630 Open Graph image Meta documents, LinkedIn’s 1200 × 627 shared image and Discord’s 960 × 540 banner, whose top 48 pixels the frame is kept clear of. The file is checked against any upload limit the platform states. A fixed canvas sets the scale itself, so the screenshot is always resized to fit and the panel says how far.

Other ways to do it

Neither macOS nor Windows has a built-in way to put a screenshot on a background. For covering, the safest method needs no tool: crop the private part out. In macOS Preview, select an area and use Tools → Crop; the Windows Photos app crops too. A crop and a solid box are the two covers nothing can undo.

Check that nothing was uploaded

Open your browser’s developer tools on the Network tab, add a screenshot and export it. No request carries the image: it is decoded, drawn and encoded in a worker in the page. The Copy style link button copies the frame, background and export settings after the #, which browsers never send, and never the screenshot or the address you typed.

For code rather than a screenshot, code to image draws the code as real text. For a photograph at every platform’s size, use social media image sizes.