iPhone mockup with a transparent background
A transparent PNG is the format that lets the phone sit on top of anything: a video, a photo, a slide, a web page. Make one here with your screen inside and the shadow kept.
Loading the maker. It needs JavaScript and runs only in your browser.
iPhone 17 Pro specifications
| Screen, points | 402 × 874 pt |
|---|---|
| Screen, pixels | 1206 × 2622 px at 3x |
| Pixel density | 460 ppi |
| Aspect ratio | 2.17:1 |
| Screen corner radius | 62 pt (186 px) |
| Cut-out drawn | Dynamic Island, 126 × 37 pt |
| Safe area, portrait | top 62 pt, bottom 34 pt |
| Status bar or menu bar | 54 pt |
| Our frame: border and edge | 3.2 pt and 2.4 pt |
| Our frame: body | 413.2 × 885.2 pt |
| Our frame: with side buttons | 418 × 885.2 pt |
| Export, frame only, 1x | 418 × 885 px |
| Export, frame only, 2x | 836 × 1770 px |
| Export, frame only, 3x | 1254 × 2656 px |
| Default export, native 3x, 10% padding | 1785 × 3187 px |
| Same screen pixels as | iPhone 18 Pro, iPhone 17 and iPhone 16 Pro |
| Formats | PNG with transparency, or JPEG without |
Screen values come from Xcode's device profiles and the iOS Simulator; the frame values are our own drawing.
Export sizes for Transparent PNG
| Use | Width | Height |
|---|---|---|
| Transparent, 2x Layer over video or a slide | 836 px | 1770 px |
| Transparent, 3x Large print or a zoom shot | 1254 px | 2656 px |
| Padded canvas, 3x Room for a shadow and a rotation | 1785 px | 3187 px |
The first row is the frame alone at that scale. Other rows are canvas sizes: set the padding and rotation noted, then place the PNG on a background of that size.
What a transparent PNG changes
A JPEG fills every pixel, so the background you picked is baked in. A PNG can keep an alpha channel, which stores how opaque each pixel is. With the background set to Transparent, the corners around the phone and the air around the shadow stay empty, and whatever you place the file over shows through. The preview uses a checkerboard so you can see where the empty pixels are.
The soft shadow is part of the picture. It is stored as semi-transparent black, so it darkens a light layer under it and barely shows on a dark one. If you plan to add your own shadow in an editor, turn ours off and the edge will be clean.
How to place the file
In a video editor, put the PNG on a track above your clip, scale it to the height you want and add a slight movement. In a slide tool, drop it on the slide and send it behind the text. In a design tool, place it as an image and the transparent area will be honored. In every case, export at 2x or 3x so you can scale down later without losing detail.
This page uses our iPhone 17 Pro frame, 1206 × 2622 px screen, with a border of 3.2 pt and an edge of 2.4 pt, so a frame-only export is 836 × 1770 px at 2x and 1254 × 2656 px at 3x. Padding adds empty space around that, 10 percent by default, and the file weight stays low because empty pixels compress well.
Two things to know
JPEG cannot hold transparency, so choosing Transparent locks the format to PNG. And a small mylarpwallet.com mark is drawn at the bottom edge, with a thin dark outline so it can be read on a light or a dark layer. Members of My Larp Wallet can switch it off. If you place the file over a busy scene, move the mark out of the way by cropping the bottom padding in your editor.
Questions
How do I make an iPhone mockup with a transparent background?
Choose Transparent under Background, add your screen, and press Download image. The file is a PNG with an alpha channel.
Why is the JPEG option greyed out?
JPEG has no alpha channel. With a transparent background the format is fixed to PNG.
Will the shadow be kept?
Yes, as a soft semi-transparent shape around the body. Untick Soft shadow to remove it.
Can I use the PNG in a video?
Yes. Place it on a track above your footage. Remember it is a mockup of a screen, so describe it that way when it could be mistaken for something else.
More mockups
- IPhone 17 Pro Max mockup makerPut any screen in a drawn iPhone 17 Pro Max frame (1320 × 2868 px).
- IPhone Air mockup makerA drawn iPhone Air mockup with a thin edge: 420 × 912 pt, 1260 × 2736 px.
- MacBook mockup makerA drawn MacBook-style laptop mockup for a 2880 × 1800 screen (1440 × 900 pt): add a screenshot or design, choose a finish, export a PNG.
- All mockups by deviceTen frames drawn for phones, a tablet and a laptop.
- Larp wallpapers for iPhone and MacJPEG backgrounds at the exact pixel size of each iPhone, mockup, not proof.
- App Store screenshot size calculatorThe exact pixel sizes App Store Connect accepts for each device.
Made by My Larp Wallet, a crypto wallet simulator that draws a wallet screen from the balances you type. The maker is a separate free tool: it needs no account, and what it draws is a mockup of a screen, never proof.
Not affiliated with Apple, Samsung or Google. iPhone, iPad and MacBook are trademarks of Apple Inc.; Samsung and Google are trademarks of their owners. The frames on this page are drawn by us from public screen dimensions and are not official artwork.