An iPhone mockup is a screenshot placed inside a phone frame so it looks like it is running on a device. Our iPhone Mockup Generator does exactly that: you add a screenshot, it sits in a clean, generic phone frame, and you export a PNG. It runs in your browser, is free, and nothing is uploaded.
That makes it handy for a quick app mockup, a launch post, a landing page or a portfolio piece. You do not need an account or design software.
How to use the iPhone mockup generator
The tool is shown above this text. The exact labels and buttons can differ a little as we update it, but the flow is always the same.
- Take a screenshot of your app or design on your phone, or export a screen from your design tool.
- Add that image to the tool above. It is read locally in your browser and never sent to a server.
- Check the preview. Your screenshot should fill the screen area of the generic phone frame.
- Export the result as a PNG.
- Save the file and use it in your post, page or presentation.
If you want a different screenshot, add another image and export again. Because everything happens on your device, you can try as many versions as you like.
Tips for good results
Start with a sharp screenshot
A mockup can only be as crisp as the image you put in. A real device screenshot is the best source. For reference, the iPhone 17 screen is 1,206 × 2,622 px at 460 ppi, with a logical size of 402 × 874 pt. You can read more on the iPhone 17 screen size page.
Match the aspect ratio
If your screenshot has the same shape as a modern iPhone screen, it fills the frame without stretching or empty bars. The iPhone 17 ratio is 1:2.17. The iPhone 17e is slightly different at 1:2.16, so a screenshot from that phone has a marginally shorter shape. See the iPhone 17e screen size page for details.
Do not stretch images
If your design was made for another shape, such as a square or a wide banner, resize or crop it first instead of forcing it into the frame. Distorted text is the fastest way to make a mockup look amateur.
Keep the screen content simple
A mockup is usually seen small, on a feed or a web page. Large headlines, clear buttons and plenty of space read better than dense screens. Pick the one screen that shows what your app does best.
Hide private data
Before exporting, check the screenshot for names, emails, notifications and anything else you would not want public. The tool runs locally, but the PNG you share is public once you post it.
Use a clean background
The exported PNG is meant to drop into other layouts. Place it on a plain or branded background in your editor, and add a short caption if you are posting on social media.
Where the result works and where it may not
Works well
- Social posts and carousels, where a phone frame gives context. See Instagram post size and Instagram carousel size for canvas sizes.
- Landing pages, product pages and press kits.
- Pitch decks, docs and blog posts.
- Portfolio and case study pages for an app mockup.
May not work
- App Store screenshots. The store has its own accepted sizes, and a screenshot inside a frame is a different thing. For example, the iPhone 17 accepts 1,179 × 2,556 px or 1,206 × 2,622 px, and the iPhone 18 Pro Max accepts 1,260 × 2,736 px or 1,290 × 2,796 px or 1,320 × 2,868 px. Check Apple’s current rules before uploading, and prepare the final image at an accepted size.
- Exact device accuracy. The frame is generic. It is not an official Apple device image, so it will not match the camera cutout, buttons or color of a specific model.
- Tiny sizes. Small text in a screenshot can become hard to read when the mockup is shrunk. Test it at the size it will appear.
- Text in other tools. If you add captions with special Unicode fonts, some apps may show boxes instead of letters. Our Instagram fonts generator is fine for bios and captions, but plain text is safer inside images and anywhere accessibility matters.
Related sizes
If you want your screenshots to match recent screens, these are the numbers we track:
| Model | Resolution | Diagonal |
|---|---|---|
| iPhone 18 Pro Max | 1,320 × 2,868 px | 6.9″ |
| iPhone 18 Pro | 1,206 × 2,622 px | 6.3″ |
| iPhone 17e | 1,170 × 2,532 px | 6.1″ |
| iPhone 17 | 1,206 × 2,622 px | 6.3″ |
The iPhone 18 Pro Max and iPhone 18 Pro both show a ratio of 1:2.17 and 1:2.17. Pixel density is 460 ppi on the Pro Max. Apple has not confirmed point sizes for the iPhone 18 models in the pages we checked, so we do not list them. Full pages: iPhone 18 Pro Max and iPhone 18 Pro.