The short answer
A raw screenshot has hard edges, no breathing room and often blends into the page it is posted on. Product teams and designers fix that with the same small set of moves: space around the image, a background that separates it from the feed, rounded corners that echo modern app windows, and a shadow that lifts it off the background.
Paste your screenshot into the tool below with Ctrl+V, pick one of the ready backgrounds, and you already have a usable image. The sections below explain how to choose each setting so the result looks deliberate rather than decorated.
Try it here: Screenshot Beautifier
Open the full tool pageStart with a good capture
No frame or gradient saves a screenshot that shows too much. Before styling, decide what the viewer should see and capture only that.
A few habits make captures cleaner. Close unrelated tabs and notifications, hide bookmarks bars and personal names, and zoom the page so text is large enough to read on a phone. If the screenshot contains email addresses, customer data or tokens, blur them first; a social post is public and gets copied.
- Capture an area, not the whole screen: Windows + Shift + S on Windows, Command + Control + Shift + 4 on Mac copies a selected area to the clipboard.
- Use a clean demo account so no real names or numbers appear.
- Zoom the browser to 110 to 125 percent before capturing small interfaces.
- Crop tight to the content; the padding is added afterwards.
Choosing the background
The background has one job: to separate the screenshot from the feed without stealing attention. Soft two color gradients work well because they are calm but clearly not white. A light screenshot looks best on a light or pastel gradient; a dark mode screenshot stands out on a deep slate background.
Brand colors are a good choice for a company account, as long as they are not more saturated than the content. If the image will be placed on a slide or a web page with its own background, choose Transparent and save as PNG. The direction slider turns the gradient, which helps when one corner of the screenshot is busy and you want the lighter color behind it.
Padding, corners and shadow
These three settings decide whether the result looks polished or overdone. In the tool they are measured relative to the size of the screenshot, so the same values look the same on a small crop and on a full screen capture.
| Setting | Good starting point | Too much looks like |
|---|---|---|
| Padding | 6 to 10 percent | A tiny screenshot floating in color |
| Corners | 10 to 16 | A pill shape that cuts off content |
| Shadow | 30 to 50 | A dark smudge under the window |
Window and browser frames
A frame tells the viewer what they are looking at. The macOS frame adds a title bar with the three colored window buttons; it suits desktop apps, code editors and anything shown as a window. The browser frame adds an address bar and suits websites and web apps.
Type the address you want to show into the frame, for example your public domain instead of a localhost test address, or leave it empty. Use the dark frame for dark mode screenshots so the bar does not glow above the content. If the screenshot already shows its own window chrome, choose no frame to avoid a window inside a window.
Sizes for X, LinkedIn and Instagram
Each platform crops images differently in the feed. Exporting in the right shape keeps your screenshot centered and uncropped. Platforms change their layouts from time to time, so check a test post when it matters.
| Where | Size in the tool | Pixels at 1x |
|---|---|---|
| X post | X post | 1600 x 900 |
| LinkedIn post | LinkedIn post | 1200 x 627 |
| Instagram feed | Portrait 4:5 or Square 1:1 | Depends on the screenshot |
| Slides and video | 16:9 | Depends on the screenshot |
| Docs, blog posts, README files | Auto | Screenshot plus padding |
File type and resolution
PNG is the right default for screenshots: text and thin lines stay sharp and transparency is supported. JPG gives smaller files and is fine when a platform limits upload size; with a gradient background the difference is hard to see.
Choose 2x when the image will be viewed on high resolution phones and laptops, or when you will scale it down later. It doubles the width and height. Results are limited to 8000 pixels on the longest side, which is more than any social network displays. Copy image puts a PNG on the clipboard, so you can paste it straight into a post or a chat.