Padding, a background, rounded corners and a shadow around a screenshot, exported at the size the destination actually wants. The part that is usually left out: every one of those decisions makes the screenshot itself smaller inside the frame, and this reports what that does to the interface text — which is the difference between a shot people read and one they scroll past.
Step by step
01Drop the screenshot
Anywhere on the canvas. It is decoded and composited on a canvas in this page — nothing is uploaded, which matters when the screenshot contains a customer's data or an unreleased feature.
02Choose where it is going
The presets are real destination sizes rather than aspect ratios, so the exported file arrives at the dimensions the destination expects instead of being resampled by it.
03Frame it
Background, padding, corner radius, shadow, window chrome and a shallow tilt. Padding is the control that costs the most — it shrinks the screenshot inside a fixed canvas.
04Check the text
The ledger reports what typical 13px interface text becomes after all the scaling. Below about 9 pixels a reader stops reading it and the screenshot becomes decoration.
Worked example
Inside a fixed output size, every pixel of padding is a pixel the screenshot does not get. On a wide preset the effect is larger than people expect.
Given
Padding against the size 13px UI text ends up
0% screenshot at 39% → 5.1px unreadable
8% screenshot at 33% → 4.3px unreadable
16% screenshot at 28% → 3.6px a texture
A full-window retina capture cannot survive a 1200-wide
card at any padding. Crop it first.A full-window retina screenshot dropped into a link preview card is scaled to roughly a third, which takes interface text below the point anyone can read it — and no amount of padding adjustment recovers that, because the problem is the ratio between a 2560-pixel capture and a 1200-pixel card. Crop to the panel you are actually talking about and the same card becomes legible. This is the most common mistake in shared product screenshots.
Before you post it
Crop before you frame
The single highest-value edit is cutting the screenshot down to the region you are talking about. A cropped detail at 60% reads; a whole window at 30% does not, however well it is framed.
Padding is not free
Inside a fixed output size, padding comes directly out of the screenshot. It makes a composition breathe and it makes the content smaller, and on a wide preset like a link card that trade is usually not worth more than about 8%.
Export at the destination's real size
Handing a platform an image at the size it wants avoids a resample you do not control. A 1200 × 630 card built as 1200 × 630 stays sharp; the same composition at 800 wide is upscaled by the platform and softens.
PNG for interface text, JPEG for photographs
A screenshot is hard-edged type and flat panels, which is what PNG is built for and what JPEG smears. The exception is a gradient background behind a small screenshot, where JPEG can be several times smaller with little visible cost.
Window chrome is a caption, not decoration
Three dots say 'this is an application'; an address bar says 'this is a website'. Adding chrome to a mobile screenshot or a terminal capture is a small lie that readers notice, so leave it off where it does not belong.
A shadow needs an opaque shape behind it
Casting a shadow directly from a screenshot traces every transparent pixel in it, so an image that already has rounded corners gets a visible double edge. The shadow here is cast by an opaque rounded rectangle drawn first, which is what keeps the edge clean.
The judgement call
The destination sets the shape; the screenshot's own detail sets the padding.
A link preview for a blog post
OG / X · 4–8%
Wide and short, so the screenshot is already scaled hard. Keep padding low and crop tightly.
A README hero image
README · 6–10%
16:9 at 1600 wide leaves enough room that moderate padding costs little legibility.
An Instagram or LinkedIn square
Square · 10–16%
A square crop wastes width on a landscape screenshot anyway, so padding is comparatively cheap here.
An App Store screenshot
App Store 6.7"
Tall and portrait. Apple requires exact dimensions and rejects anything else.
A full-window retina capture
Crop it first
At 2560 wide it will be scaled to about a third by any card preset, taking UI text below readable.
Placing the shot on your own page
None · transparent
Export with no background and composite it onto whatever surface the page already has.
Reference
FAQ
Crop it to the region you are actually showing, then frame it at the destination's real dimensions with modest padding — around 4 to 8% for a wide link card. The Tinapps screenshot beautifier adds a background, rounded corners, a shadow and window chrome, and reports what the framing does to the interface text so you can see whether it is still readable.
Because a retina capture is far wider than the card it lands in and gets scaled down to compensate. A 2560-pixel screenshot in a 1200 × 630 link card is drawn at roughly a third, which takes 13px interface text to about 4px. Cropping the screenshot to the relevant panel fixes it; adjusting padding does not.
Export the finished composition at 1200 × 630. Building it at the destination's exact size avoids a resample you do not control — a smaller image is upscaled by the platform and softens, while a much larger one is downscaled with no say in the filtering.
PNG in most cases, because a screenshot is hard-edged text and flat panels, which is exactly what PNG stores well and JPEG smears. The exception is a small screenshot on a large gradient background, where JPEG at high quality can be several times smaller with little visible loss.
No. The Tinapps screenshot beautifier has no watermark, no account, and no export limit. It composites the image on a canvas in your browser, so there is no per-export cost to recover and nothing is uploaded — which also means a screenshot containing customer data never leaves your machine.
Yes. Set the background style to None and the composition exports with only the screenshot, its rounded corners and its shadow, over transparency. That is the right choice when you are placing the shot onto a page or slide that already has its own surface.
The screenshot is decoded and composited entirely in your browser and is never uploaded — worth knowing when the capture contains customer data or an unreleased feature.
Keep going
Code to image
The same job for a code snippet, with real syntax highlighting.
Image cropper
Crop the capture down before framing it — the edit that matters most.
OG image generator
Build the card around the screenshot rather than from it.
Image compressor
Bring a large PNG under a destination's size limit.