Online Tool Store
Screenshot Device Mockup
Build a multi-device mockup: place your screenshots on a laptop, tablet and phone in one scene, pick a background and export a PNG. Nothing is uploaded.
This works right here on your device — nothing gets sent out.
Example shown — add your own screenshots to replace it.
How Screenshot Device Mockup works
- Pick a scene: laptop + tablet + phone, laptop + phone, or three phones.
- Paste, drop or choose a screenshot. The first one fills every screen; select a screen to give it its own capture.
- Choose graphite or silver devices, a gradient, solid or transparent background, and whether to add shadows.
- Download the scene as a PNG at 1× or 2×, or copy it to your clipboard.
How screenshots are fitted to each screen
Every screen has a fixed aspect ratio taken from a common viewport. Your screenshot is scaled by the larger of the two ratios between screen and image, so it covers the screen completely, then trimmed. Trimming keeps the top of the image, where a page's header and hero live, and centres it horizontally.
scale = max(screen width ÷ image width, screen height ÷ image height)
Example: a 1440 × 3000 full-page capture on a laptop screen 1180 px wide scales by 1180 ÷ 1440 ≈ 0.82, so the top 900 px of the page fill the 16:10 screen and the rest is trimmed.
FAQ
How do I make a responsive mockup with a laptop, tablet and phone?
Choose the "Laptop + tablet + phone" scene, select each screen in turn and paste, drop or choose its screenshot — ideally a desktop, tablet and mobile capture of the same page. Then pick a background and download the PNG.
Can I use one screenshot for every device?
Yes. Your first screenshot is placed on every screen at once. Each screen is filled from the top without stretching, so a wide desktop capture shows its top-centre section on the phone. For the most convincing result, add a real mobile capture to the phone screen.
Will my screenshot be stretched or squashed?
No. Each screen keeps a real device aspect ratio (16:10 laptop, 820 × 1180 tablet, 393 × 852 phone). A screenshot that does not match is scaled to cover the screen and trimmed at the bottom or sides, never distorted.
Are my screenshots uploaded?
No. The devices are drawn on a canvas in this browser tab and the PNG is created on your device, so unreleased designs and staging pages never leave your computer.
Can I make an App Store-style row of phones?
Yes. The "Three phones" scene shows three phones side by side, with the centre one slightly larger and in front. Give each phone its own screen to show three steps of an app.
How is this different from the Device Mockup Generator?
Device Mockup Generator puts one screenshot into one device with crop and letterbox controls. Screenshot Device Mockup builds a scene with several devices, each showing its own screenshot, for responsive-design and app showcases.
How we compare
| Feature | Online Tool Store | Am I Responsive | MockUPhone |
|---|---|---|---|
| Laptop, tablet and phone in one image | Yes — three scene layouts | Yes — four viewports | Not stated on its homepage |
| Works from screenshots, no public URL needed | Yes | URL only | Yes |
| Built-in PNG download | Yes — 1× or 2×, or copy | None listed — you screenshot it yourself | Not stated on its homepage |
If you want a multi-device showcase built from your own screenshots, including staging or private pages, Screenshot Device Mockup composes and exports it in one step, right in this tab.