Screenshot beautifier

A framed capture is what most app listings actually publish

Nothing in Apple’s screenshot specification requires the image to be a raw capture of your app: it asks for a file at an accepted pixel size, in an accepted format, without an alpha channel. A capture placed on a background with padding satisfies that exactly as well, which is why almost every App Store listing publishes compositions rather than captures. The accepted sizes and the alpha rule are quoted in App Store screenshot size.

Use the screenshot beautifier without turning it into a different editing job

This screenshot beautifier places one local image on a presentation background. It can add padding, rounded corners and a controlled shadow, then export the composed canvas as PNG or JPEG. The screenshot keeps its decoded display width, height and aspect ratio. There is no cover crop, fit resize, freeform transform or hidden upscaling step, so interface text and fine lines are not stretched merely to fill a preset rectangle.

Presentation pixels around the screenshot are still real output pixels. A rounded corner deliberately removes coverage at the screenshot edge, transparent source pixels are composited over the chosen background, and an enabled shadow changes the surrounding canvas. The receipt names those operations rather than claiming that the entire new file is byte-identical to the source.

Presets are reversible settings, not hidden templates

Clean, Soft gradient and Dark gradient are shortcuts for visible controls. Clean uses a compact warm solid frame with rounded corners and no shadow. The two gradient presets use a larger frame, a 45-degree two-color background and a soft shadow. Their padding, corner radius, blur and vertical offset are derived from the shorter source side and rounded to whole pixels, so the visual weight scales with a small mobile capture or a large desktop screenshot.

Selecting a preset writes every value into the form. Change the background colors, gradient angle, padding, corner radius, shadow blur, offsets, opacity, format or JPEG quality and the scene becomes Custom. Selecting a named preset again restores all of its canonical values for the current source. Nothing remains hidden from an earlier style, which makes comparison and reversal predictable.

Padding and shadow safety are separate measurements

Padding is the intended breathing room around the screenshot. A shadow also needs room for its blur and offset. To avoid clipping, the renderer derives a symmetric shadow safety inset as the ceiling of three times the blur plus the larger absolute offset. Frame inset is padding plus that safety inset. Output width and height are the decoded display dimensions plus twice the frame inset.

The interface shows Padding, Shadow safety inset, Frame inset, Output dimensions and the exact Content rectangle before export. A directional shadow can therefore enlarge both sides of the canvas even when most visible shadow falls below or to one side. That deliberate symmetric margin keeps the source centered and makes the formula stable when an offset changes sign.

Choose PNG or JPEG with the opaque-background boundary visible

Both output formats are opaque because the selected solid or linear-gradient background is part of the design. PNG preserves the composed raster without JPEG's lossy compression and is usually the safer choice for small interface text, thin rules and flat colors. JPEG exposes a quality control and can be smaller for photographic screenshots, but it recompresses every output pixel. The filename ends in -beautified.png or -beautified.jpg.

The browser reopens the encoded bytes, verifies PNG or JPEG magic and confirms the dimensions before the download is available. The on-page result preview uses that same reopened blob, not a separate CSS approximation of the scene. A file that fails that check is reported as an error and never offered, and the file size appears on the receipt so the result can be judged before saving it.

Orientation, transparency, animation and metadata are explicit

Format is decided from decoded bytes rather than a renamed extension. PNG, JPEG and WebP are the supported still-image inputs. Stored dimensions and display dimensions are shown separately when orientation changes how a JPEG is presented. The normalized display image is what the scene uses, so the output is not unexpectedly sideways.

Animated PNG and animated WebP are rejected with an unsupported result. Quietly decorating only the first frame would destroy motion while returning a plausible file. Source EXIF, ICC, XMP and other metadata are not copied into the flattened export. A color profile can influence the browser's decode, but the new canvas is not a profile-preserving archival conversion.

Text is drawn into the file, not floated over the preview

A text layer sets its own content, position, size, color, alignment and typeface, anywhere in the composition. Position and size are given as percentages of the canvas rather than in pixels, so the same layer stays where you put it when you change the output size — a caption pinned in pixels would slide and shrink the moment the canvas changed.

The lines are measured and wrapped against the exported dimensions, in the same pass that draws them, so the preview you are looking at is the file itself rather than an approximation of it. Words are never broken mid-word to make a line fit: a long URL or product name that outgrows the line width runs past the edge instead, and the layer says so, because a name chopped in half is a worse answer than a line you can see is too long.

Each layer reports the contrast between its color and the worst pixel behind it — the darkest or lightest one under the text, not an average, since a heading can be perfectly legible across most of a gradient and vanish at one end. Below 3:1 it says the text fails what WCAG AA asks of large text; between 3:1 and 4.5:1 it says the text is large enough to pass but smaller text would not be. The type is set in the fonts already on your device rather than one this page downloads, which keeps the page small; the trade is that the same settings can produce slightly different letterforms on someone else's machine, and the receipt says so.

Where this page stops and another one starts

By default the canvas is the screenshot plus the frame you can see, and nothing is resampled. Choose an output size and that changes: the screenshot is scaled to fit inside the size you asked for, its proportions kept, with the background filling whatever is left over. The receipt says which of the two happened and by what factor, because a picture that has been enlarged is not the same evidence as one that has not.

Two of those sizes belong to app stores, and both have their own page here, because a store does not just want a number. Apple publishes a table of accepted sizes per device and rejects an alpha channel, which is what the App Store screenshot generator is built around. Google asks for a single mandatory 1024 by 500 banner and puts a play button over the middle of it, which is what the Google Play feature graphic generator draws on screen for you. Neither is a preset hidden in a dropdown on this page.

The OG image generator starts from a headline rather than from a picture: it sets a title, eyebrow and site label into fixed roles on a social canvas, and that structure is the point of it. This page starts from a screenshot, and its text layers are free-floating rather than named slots. For dozens of files, or for cropping rules applied per image, the bulk image resizer is the right tool — it owns fill crop, fit padding and upscaling policy at volume, with no frame or shadow. Here, a handful of screenshots share one composition. To permanently cover sensitive pixels, use redact image; a decorative background and shadow do not remove information inside the screenshot. For layered artwork with stickers and templates, the greeting card maker owns that job.

The screenshot and generated file stay in this tab

Choosing, dropping and pasting an image are equivalent local inputs. The shared size advice appears before memory-heavy work and lets you continue locally instead of rejecting a file at an arbitrary byte limit. A replacement selection or Cancel invalidates older work, and Start over releases the decoded source, Worker, preview and blob URL before another image is opened.

No screenshot bytes, colors, settings or generated file are sent to an upload endpoint, stored in the URL or retained in browser storage. The local-processing verification guide explains how to inspect that boundary. If the final presentation is correct but needs fewer bytes, pass the downloaded result to the image compressor as a separate, measurable step rather than hiding extra quality loss in the framing controls.