Online Tool Store
Device Mockup Generator
Drop a screenshot into a drawn phone, tablet, laptop or browser frame, with the aspect-ratio mismatch reported and no stretching. Runs in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
The frames are generic shapes built from a viewport size and a few proportions — they are not renderings of any particular manufacturer's hardware, which keeps them free of anyone's industrial design and means they stay sharp at any export scale. Screenshots are never stretched: if the aspect ratios differ, the tool crops or letterboxes and tells you which. Everything happens in your browser.
How to use it
- Drop in a screenshot — a placeholder frame is drawn so you can see the shape first.
- Pick the device whose viewport matches what you captured.
- Choose crop or letterbox if the ratios differ; the note tells you by how much.
- Set an export scale — 2× for screens — and download.
Aspect ratio is the only thing that matters
People worry about pixel dimensions and they are the wrong thing to worry about. A screenshot is scaled to fit the frame regardless of its size; what cannot be fixed by scaling is a mismatched shape:
phone viewport 393 × 852 ratio 0.461
3× screenshot 1179 × 2556 ratio 0.461 → fits exactly
desktop capture 1920 × 1080 ratio 1.778 → 74% cropped
The first two are the same shape at different densities, so one scales into the other with nothing lost. The third is a landscape image going into a portrait screen, and no amount of scaling makes that work — it has to lose most of its width or gain large bars. The tool reports the mismatch as a percentage so the decision is informed rather than a surprise.
What it will never do is scale the two axes independently. A stretched screenshot is instantly recognisable — text goes subtly wrong in a way people notice without being able to say why — so cropping or padding is always preferred, and you choose which.
Drawn frames, not photographs
Every frame here is constructed from a handful of numbers: the viewport size, a corner radius, a bezel width, and whether there is a camera cutout or a stand. That has three consequences worth knowing.
It stays sharp at any export scale, because there is no source bitmap to run out of — a 3× export is genuinely three times the detail rather than an upscale. It has no manufacturer's industrial design in it, which matters if the mockup is going into a client presentation or a product page. And the corner radius clips the screenshot properly, so the image follows the rounded screen rather than sitting in a square hole behind a frame.
The device pixel ratio confusion
A common worry is that a phone screenshot is "too big" — 1179 pixels wide against a device listed as 393. Those are different units: 393 CSS points at a 3× pixel ratio is 1179 physical pixels. The shape is unchanged, so the screenshot is exactly right and simply has more detail than the frame needs. That extra detail is what makes a 2× or 3× export look good, so capture at your device's native resolution rather than scaling down first.
Where mockups go wrong
Beyond stretching, the usual problems are a screenshot taken at a different zoom level than the frame implies, so the interface looks oversized for the device; a status bar left in from one device shown inside another; and a shadow baked into the image that then sits on a dark background and looks like a grey halo. The last one is why the shadow is a toggle rather than always on, and why transparent is offered as a background — if you are compositing the mockup into something else, let that thing provide the shadow.
FAQ
Why are the devices not named after real models?
Because the frames are geometric shapes built from a viewport size and a few proportions, not renderings of anyone's hardware. Naming them after real products would imply they are accurate depictions of those products, and using a manufacturer's industrial design in a template is a question you do not want in a client deliverable. The viewport sizes are what actually matters for a screenshot, so those are what the labels give you.
Why does my screenshot get cropped?
Because its aspect ratio does not match the screen you chose. Something has to give: crop, letterbox, or stretch. Stretching is never offered — a screenshot squashed to fit is the single most obvious flaw in a mockup — so the tool crops or pads and tells you exactly how far off the ratio was.
My phone screenshot is 1179 pixels wide but the phone says 393. Is that wrong?
No, that is the device pixel ratio. A phone with a 393-point viewport at 3× captures 1179 actual pixels. The ratio is identical, so it scales down perfectly with no cropping — which is why the tool compares ratios rather than pixel counts. A high-resolution screenshot is better input, not worse.
What export scale should I use?
Two times for anything shown on screen, which covers retina displays. One time is fine for a quick preview or an email. Three times is for print or for a hero image that may be displayed very large. Because the frame is drawn rather than photographed, every scale is sharp — only your screenshot limits the detail.
Can I put it on a transparent background?
Yes, and it is the default worth using if the mockup is going into a slide or a page with its own background. The shadow is drawn as part of the image, so it will look right over a light background and slightly odd over a very dark one — turn it off in that case.
Is my screenshot uploaded?
No. It is decoded and composited in the page, and the PNG is generated in your browser. That matters more than usual here, because screenshots routinely contain unreleased interfaces, customer data or a logged-in account.
How we compare
| Feature | Online Tool Store | Mockup websites | Figma with a device kit |
|---|---|---|---|
| Screenshot never leaves your device | ✓ | ✗ | Cloud document |
| Reports the aspect-ratio mismatch | ✓ | ✗ | ✗ |
| Never stretches to fit | ✓ | Sometimes does | Up to you |
| Sharp at any export scale | ✓ | Bitmap frames | ✓ |
| Free, no account, no watermark | ✓ | ✗ | Account needed |
| Photorealistic hardware, angles and reflections | ✗ | ✓ | ✓ |
| Multiple devices in one composition | ✗ | ✓ | ✓ |
The right tool when the screenshot is confidential and you want a clean flat mockup in ten seconds. If you need a photorealistic device at an angle on a desk, or three devices in one scene, that is a rendering job rather than this.