Skip to content
Betterbit Tools

Screenshot Mockup

Add a gradient, shadow, and browser frame to a screenshot, then download a local PNG.

  • Runs in your browser — files never leave your device
  • Instant — no waiting, no queue
  • Fewer clicks, keyboard friendly
  • No sign-up, no limits

Drop a screenshot here

PNG, JPEG, or WebP — paste, drop, or choose a file

Download shortcut: D

How to use

  1. Drop, paste, or choose a PNG, JPEG, or WebP screenshot.
  2. Choose a gradient background and browser frame.
  3. Adjust the canvas shape, padding, corners, and shadow.
  4. Optionally enter a browser-bar title, then review the live preview.
  5. Select Download PNG to save the finished mockup.

Choose a canvas without losing the screenshot

Original keeps the composition’s natural shape. Square (1:1), portrait (4:5), and landscape (16:9) add gradient space around the image instead of cropping it. That makes one source screenshot easier to adapt for a post, a slide, or a page header while keeping every source pixel visible.

A browser frame for web product screenshots

A browser frame adds a compact title bar above the screenshot. Light and dark versions let the frame match the screenshot’s surrounding interface; the optional title is limited to 100 characters so it remains readable in a small export.

PNG export stays sharp

The finished composition downloads as PNG, a lossless image format well suited to UI text and crisp interface edges. To keep browser memory practical, the longest export edge is capped at 4,096 pixels; very large source images are scaled down proportionally rather than cropped.

Frequently asked questions

Are screenshots uploaded when I make a mockup?

No. The screenshot is decoded, composed, previewed, and exported in the current browser tab; this tool does not send the source image to a processing server.

Will a square or 16:9 screenshot mockup crop my image?

No. Square, 4:5, and 16:9 canvases preserve the whole screenshot and place additional gradient background around it when necessary.

What image files can I use?

This tool accepts PNG, JPEG, and WebP files that the current browser can decode. The download is always a PNG file.

What is the largest screenshot mockup export?

The exported PNG is limited to a 4,096-pixel longest edge to avoid an unnecessarily large canvas. Smaller images retain their planned dimensions.

Can I add a website name to the browser frame?

Yes. Choose either browser frame and enter an optional title of up to 100 characters; it appears centered in the frame bar.

Related tools

Image ResizerResize one photo or a batch of up to 50, by pixels or percent — privately, in your browser.Image CropperDrag a box, lock an aspect ratio, or cut a perfect circle — privately, in your browser.Image CompressorTell it a target size in KB or MB and it finds the best quality to hit it — privately, on your device.

Updated 2026-10-28