Device Mockup Generator: Put a Screenshot in an iPhone or Android Frame
Drop a screenshot, pick an iPhone, Android phone or tablet and a frame color, and download a sharp PNG mockup — the image is drawn in your browser and never uploaded.
Your mockup
Showing a sample screen. Add your screenshot to replace it.
How to make a device mockup
- Take a screenshot of your page on a phone — or use one from a MobileCheck report, which already has the right width for each device.
- Drop it on the box above, paste it, or choose the file.
- Pick the device, a frame color and a background. Add a second device, such as a tablet, to show both side by side.
- Click Download PNG. The file is drawn at twice the device's CSS size, so it stays sharp on slides and high-density screens.
Everything happens in your browser: the image is drawn on a canvas on your device and never uploaded. A transparent background is handy when the mockup goes on top of your own slide or web page design.
Getting a sharp result
The screen area of each frame has the device's real viewport proportions — for example 402 × 874 CSS px for the iPhone 16 Pro / 17 / 17 Pro. A screenshot taken on that device (or emulated at that size) fits exactly. A screenshot with a different shape is fitted with the option you choose: fit width keeps the top of a long page, as a visitor would see it on first load; fill crops evenly; show the whole image shrinks it with bars at the sides or top. Phone screenshots are usually 3× the CSS size, so they are scaled down to 2× without losing detail.
The frames
Frames follow the shape of each device family. iPhone 14 Pro and newer (including 15, 16 and 17) get the Dynamic Island; iPhone X to 14 the notch; iPhone SE and 8 and earlier the Home button with wide bezels. Recent Android phones get a punch-hole camera, older ones top and bottom bezels, and tablets even bezels with the camera in the frame. The drawings are deliberately simple and generic, not product photos, so they work in documentation, portfolios, pitch decks and bug reports.
Screenshots of your site on many phones
Need the screenshots first? The free check renders your page with the real browser engine for each device — WebKit for iPhones and iPads, Chromium for Android — at the device's exact viewport size. The mobile viewport sizes table lists the CSS width, height and pixel ratio of every device in the frame list above.
Frequently asked questions
Is my screenshot uploaded anywhere?
No. The image is read and drawn by your own browser on a canvas; nothing is sent to our server, and closing the page discards it.
How big is the downloaded PNG?
Twice the device's CSS size plus the frame and margins. An iPhone 16 Pro / 17 / 17 Pro mockup is 1116 × 2060 px, which is sharp on high-density screens and in slides.
Can I use a full-page screenshot?
Yes. With "Fit width, show the top" the screenshot fills the width of the screen and the part below the fold is cut off, as it would be on the phone. Choose "Show the whole image" to shrink it to fit instead.
Can I use the mockups commercially?
The frames are simple generic drawings made by this tool, and you can use the images you create freely. Your screenshot stays yours. For official Apple or Google product images, use their marketing resources and guidelines.
More free tools: color contrast checker · tap target size checker · mobile font size calculator · css media query generator · all tools