Utilia

Screenshot Beautifier

Turn a plain screenshot into a polished image with a gradient background, padding, rounded corners, a shadow and a macOS or browser frame.

Add a screenshot to see the preview: drop it above, choose it, or paste it.

How to beautify a screenshot

  1. Drop a screenshot on the drop zone, click it to choose a file, or simply paste it with Ctrl+V (⌘+V on a Mac) right after taking it. The Paste from clipboard button does the same where the browser allows it.
  2. Pick a Window frame: macOS window (the red, yellow and green buttons), Windows window (minimize, maximize and close on the right), Browser window (a tab, navigation buttons and an address bar) or No frame. Choose the Frame theme, Light or Dark, to match the screenshot.
  3. Type a Window title or URL. It appears in the title bar, or in the tab and the address bar of the browser frame (a leading https:// is dropped, as browsers do).
  4. Choose a Background: one of the Gradient presets, a Solid color, your own Image, a Blurred screenshot (a soft, blurred copy of the capture itself) or Transparent.
  5. Adjust Padding, Corner radius, Shadow size, Shadow offset and Shadow opacity. The preview updates as you move each slider.
  6. Pick an Aspect ratio if the image is going to a specific place, and an Output size.
  7. Click Download PNG, or Copy image to paste the result straight into a chat, a document or a slide.

Why frame a screenshot?

A raw screenshot has hard edges and blends into the white page around it. Placing it on a colored background, with space around it and a soft shadow, separates it from the surrounding content and makes it read as an object: a window you are showing, not a piece of the page. This is the look used in product launches, changelogs, documentation, tweets and slide decks.

The window frames are drawn by the tool, pixel by pixel, rather than copied from an operating system. They give context (a desktop app, a website) and hide the fact that the capture was cropped. Use the browser frame for web pages: it also shows your URL, which is useful in tutorials.

Aspect ratios for social media

With Auto (fit the screenshot), the picture is exactly the screenshot plus its padding. The other presets make the background larger in one direction only and keep the window centered, so nothing is cropped:

  • 16:9 (X / Twitter, YouTube, slides): the ratio that X displays without cropping in the timeline, and the shape of most presentations.
  • 1.91:1 (LinkedIn, Facebook link preview): the shape of Open Graph link images (1200 × 628 px).
  • Square 1:1 (Instagram) and Portrait 4:5 (Instagram feed): the two shapes the Instagram feed shows in full.
  • 9:16 (Stories, Reels) for vertical formats, and 4:3 (presentations) for older slide templates.

Sizes and quality

The output keeps the full resolution of your screenshot, so text stays sharp. Padding is a percentage of the window size, and the title bar, corner radius and shadow scale with the screenshot’s width, so a Retina capture and a small one get the same look. The PNG size is shown below the preview. Set Output size to 50 % for a lighter file, or 200 % to enlarge a small capture. Very large results are reduced to the largest canvas every browser can create.

PNG is lossless and keeps transparency: with a Transparent background, only the window and its shadow remain, ready to place over any design. Everything happens in your browser: the screenshot is never uploaded.

Frequently asked questions

How do I paste a screenshot directly?

Take the screenshot to the clipboard (Print Screen or Win+Shift+S on Windows, Ctrl+Shift+Cmd+4 on a Mac), then press Ctrl+V or ⌘+V anywhere on this page. Text pasted into the title field is not affected.

Why doesn't Copy image work in my browser?

Copying images needs the asynchronous Clipboard API. Chrome, Edge and Safari support it; some versions of Firefox don’t. Use Download PNG instead.

Can I use my own background picture?

Yes. Choose Image as the Background and click Choose a background image. The picture is scaled to cover the whole canvas and centered.

Will the frame change the size of my screenshot?

No. The screenshot is drawn at its original size; the title bar is added above it, and the padding around the window.

How do I get a transparent PNG with only a shadow?

Choose Transparent as the Background and keep a Shadow size above zero. The shadow is saved as semi-transparent pixels.