Screenshot Mockup
Drop a screenshot and export a framed, share-ready image — window chrome, backgrounds, 3D tilt and text layers.
How it works
Drop a screenshot onto the canvas, paste it from the clipboard with ⌘V (Ctrl+V on Windows), or use the upload button in the panel. The editor opens with the image already framed.
Pick a frame preset, then set the details: window chrome (macOS, browser or plain), padding, corner radius, drop shadow, border, background, image filters, 3D tilt and text layers.
Set the canvas size — X cards, Instagram squares, OG images, full-HD, App Store screenshot dimensions — or type a custom width and height.
Export PNG, JPEG or SVG at 1×, 2× or 3×, or copy the PNG straight to the clipboard with ⌘⇧C.
Export size
The canvas size is the layout size, in CSS pixels. The export scale multiplies it. Set the canvas to the aspect ratio you want and use the scale to hit a required pixel count — a 660 × 1434 canvas at 2× is the 1320 × 2868 an App Store iPhone screenshot asks for.
output width = canvas width × scale · output height = canvas height × scale
Use cases
X / Twitter cards
A 1600 × 900 canvas with a dark gradient and macOS chrome fills the card slot without cropping. Tilt and glare are optional; the frame is what stops a raw screenshot reading as a support ticket.
Instagram and LinkedIn posts
1080 × 1080 square or 1080 × 1350 portrait. Add a headline and a one-line subtitle as text layers, export at 2×, and the upload stays sharp on a retina phone.
App Store and Play Store screenshots
Type the exact dimensions the store asks for, or halve them and export at 2×. Browser and macOS chrome are available for Mac App Store listings; plain frame plus padding is what most phone listings want.
Landing page heroes
Export SVG for a hero shot that stays sharp at any device pixel ratio. The screenshot is embedded in the SVG, so it is one file with no separate asset to host.
Documentation screenshots
Browser chrome with a real URL in the address bar tells a reader immediately that they are looking at a web app rather than a cropped rectangle. Add a text layer to label the step.
Open Graph images
1200 × 630 is a preset. Drop a screenshot, add the article title as a text layer, export PNG — the share preview stops being a blank card.
Questions
- Does the screenshot get uploaded anywhere?
- No. The image is read with FileReader and rendered in the page; the export runs through html-to-image in the same tab. Nothing is sent to a server, and there is no server here that would receive it.
- What output formats are supported?
- PNG, JPEG and SVG, each at 1×, 2× or 3×. PNG keeps a transparent background where the canvas has one, JPEG is smaller and always opaque, SVG embeds the screenshot and stays sharp at any size.
- Can I use it for App Store screenshots?
- Yes. Enter the dimensions your store requires — or half of them at 2× — and export. Apple currently asks for 1320 × 2868 on a 6.9-inch iPhone and 2064 × 2752 on a 13-inch iPad; both are in the size list.
- Does it work on a phone?
- Yes, though the editor is easier on a wide screen. Below the large breakpoint the control panel collapses under the canvas and opens when you pick a tab, so the preview keeps the screen.
- Is there a watermark?
- No. Nothing is added to the export, and the output is yours to use commercially.
- Can I put text or a logo over the screenshot?
- Text, yes — any number of layers, each with its own font, size, weight, spacing, case, colour, rotation and effect, dragged into place on the canvas. A logo would be a second image, which this does not do; composite it into the screenshot first.
More tools
One of 18 free tools here. They come out of building utility apps for macOS, iOS and the browser — all of it by one person.
See the apps