Screenshot mockup generator
Put any screenshot in a browser frame or macOS window with an editable URL and title, add a caption and background, and export at each platform’s exact size.
Drop a screenshot to frame it Frame a screenshot
Drag & drop it here or press ⌘V to paste — it’s framed the instant it lands. Pick one from your photos — it’s framed the instant it lands.
How to put a screenshot in a browser frame
Three steps, and it all happens in your browser.
Add a screenshot
Drop it into the box above, press ⌘V to paste, or click to browse — it’s framed the instant it lands. Tap the box above and pick a screenshot from your photos — it’s framed the instant it lands.
Style the mockup
Pick a browser or Mac window frame, type your own title or URL, then choose a background and adjust the padding, corners and shadow.
Copy or download
Copy the finished mockup to your clipboard, or download it as a JPG or PNG — already sized for LinkedIn, X, Instagram or your link preview.
Browser frame, Mac window, or none
A frame tells people what they’re looking at before they read a word: a live website, a Mac app, or just a clean image. All three are drawn as vector paths, so they stay sharp at any export size.
- Browser frameFor websites and web apps — a clean Safari-style window with an address pill you can type any URL into.
- Mac windowFor native Mac apps — traffic lights and an editable window title, in a light or dark theme to match your screenshot.
- No frameJust the background, padding, shadow and rounded corners — right for mobile screenshots and Mac captures that already have corners of their own.
Add a background and a caption
The background does most of the work of making a screenshot look finished, and a social post usually needs a line of text with it. Do both here and download one image — no second tool.
- Nine editable gradients — or one sampled from your screenshot’s own colours
- Flat colours, an image of your own, or a transparent background
- Add text in six ready-made styles and 36 typefaces, drawn as sharp vectors
- Drag anything into place — it snaps to guides, and ⌘Z undoes every step
Blur emails and names before you frame anything — our annotate screenshot tool redacts right in the browser.
The right size for every platform
Auto fits the canvas to the mockup, which is what documentation and changelogs want. Pick 16:9, 4:3 or 1:1 instead and the canvas grows around your screenshot — it is never cropped and never stretched.
The More button holds a preset for each place a product screenshot ends up: LinkedIn, X, Reddit and Instagram posts, Product Hunt galleries, YouTube thumbnails and GitHub social previews. Each one exports at that platform’s exact pixels, so the file you download is the file you upload.
It works as an Open Graph image generator too: the link preview preset exports the 1200 × 630 card that Facebook, LinkedIn, Slack and Discord build from your page’s og:image tag.
- JPG for small files, PNG for exact pixels
- Custom sizes from 100 to 8,000 px
- Transparent PNGs drop straight onto slides and decks
Frequently Asked Questions
Is this mockup generator free, and does it add a watermark?
It is completely free — no watermark, no sign-up and no export limit. Everything is drawn on a canvas element right in the page, so there is no upload step and no waiting on a server. These web tools are how we introduce Snapix, our screenshot app for macOS.
Can I change the URL and window title text?
Yes. The Safari-style browser frame has an editable address pill and the Mac window an editable title. The text is redrawn on the canvas as you type, so whatever you write exports as part of the image.
Can I add text or a caption to the mockup?
Yes. Drag one of the six styles out of the Text tab onto the canvas — or press T — and type straight onto the preview. There are 36 typefaces to pick from, captions export as sharp vectors at any size, and ⌘Z undoes any step.
Which social media sizes can I export?
Nine presets, behind the More button on the size row: LinkedIn, X and Reddit posts at 1920 × 1080, Instagram square and portrait, Product Hunt gallery, YouTube thumbnail, GitHub social preview and the 1200 × 630 link preview. Each exports at that platform’s exact pixels, and Custom takes any size from 100 to 8,000 px.
What size should an Open Graph image be?
1200 × 630 pixels, which is the link preview preset here. That is the size Facebook’s sharing documentation asks for, and Slack, Discord, Bluesky, LinkedIn and Reddit read the same og:image tag — so one export covers all of them.
Should I export a JPG or a PNG?
JPG — the default — is encoded at 92% quality, very hard to tell from the PNG by eye and a fraction of the size. Pick PNG for pixel-exact UI work; a transparent background always exports as PNG, since JPG cannot hold transparency.
Clean window captures in one keystroke
Snapix’s window capture (⌘⇧5) grabs any Mac window cleanly, with a live highlight of exactly what you’ll get — the perfect input for a mockup. Annotate it first with the editor’s 15 tools, and every capture stays right on your Mac.
Get SnapixFree for 14 days · macOS 14+ · See pricing