iPhone mockup on a transparent background
A transparent PNG lets the phone rest on anything: a clip, a photograph, a slide, a web page. Make one here with your screen inside and the shadow included.
The maker is loading. It needs JavaScript and does all of its work on your own device.
iPhone 17 Pro, measured and drawn
| Display in points | 402 × 874 pt |
|---|---|
| Display in pixels | 1206 × 2622 px at 3x |
| Density | 460 ppi |
| Proportion | 2.17:1 |
| Rounding of the glass corners | 62 pt (186 px) |
| Camera cut-out we paint | Dynamic Island, 126 × 37 pt |
| Upright safe area | top 62 pt, bottom 34 pt |
| Strip along the top edge | 54 pt |
| Drawn black border, then metal edge | 3.2 pt and 2.4 pt |
| Drawn body, no buttons | 413.2 × 885.2 pt |
| Drawn body plus side keys | 418 × 885.2 pt |
| Bare frame at 1x | 418 × 885 px |
| Bare frame at 2x | 836 × 1770 px |
| Bare frame at 3x | 1254 × 2656 px |
| Ready canvas at 3x with 10% of padding | 1785 × 3187 px |
| Shares its pixel grid with | iPhone 18 Pro, iPhone 17 and iPhone 16 Pro |
| File types | PNG keeps transparency, JPEG does not |
The display figures follow the device profiles in Xcode and the iOS Simulator. The frame figures are our own drawing.
Canvas sizes worth exporting for Transparent PNG
| Purpose | Wide | Tall |
|---|---|---|
| Transparent, 2x Layer over a video or slide | 836 px | 1770 px |
| Transparent, 3x Large print or a close-up shot | 1254 px | 2656 px |
| Padded canvas, 3x Space for the shadow and a tilt | 1785 px | 3187 px |
Row one is the bare frame at that scale. The rest are finished canvases: apply the padding and tilt in the note, then set the PNG on a backdrop of that size.
What changes with transparency
A JPEG paints every pixel, so whatever background you chose is baked in. A PNG can carry an alpha channel, a per-pixel record of how opaque each point is. With Background set to Transparent, the corners and the air around the shadow stay empty, and the layer beneath shows through. The preview draws a checkerboard so you can see which pixels are empty.
The soft shadow belongs to the picture as semi-transparent black: it darkens a light layer underneath and almost vanishes on a dark one. Planning to add a shadow of your own in an editor? Switch ours off and the outline stays clean.
Placing the file
In a video editor, put the PNG on a track above the clip, scale it to the height you need and add a little 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 clear area is respected. Whichever you use, export at 2x or 3x so you can scale down later without losing detail.
This page is set to our iPhone 17 Pro drawing: a 1206 × 2622 px screen, a border of 3.2 pt and an edge of 2.4 pt. 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 since empty pixels compress well the file stays light.
Two things worth knowing
JPEG cannot hold transparency, so choosing Transparent locks the format to PNG. And a small flexdger.com mark sits at the bottom edge, with a thin dark outline so it reads on light and dark layers alike. Members of Flexdger Wallet can turn it off. Over a busy scene, crop the bottom padding in your editor to move the mark out of the way.
Quick answers
How do I get an iPhone mockup with a clear background?
Set Background to Transparent, add your screen, then press Download image. You receive a PNG that has an alpha channel.
Why can't I pick JPEG?
JPEG has no alpha channel, so a transparent background fixes the format to PNG.
Does the shadow survive?
Yes, as a soft semi-transparent shape around the body. Untick Soft shadow to drop it.
Can I drop the PNG into a video?
Yes: put it on a track above your footage. It is a mockup of a screen, so describe it that way if someone could mistake it for something else.
Other frames to try
- iPhone 17 Pro Max mockup in your browserThe tallest iPhone canvas in our set, 440 × 956 pt.
- iPhone Air mockup with a slim frameA slim frame for the one iPhone with a pixel size of its own.
- MacBook mockup with a 16:10 screenA 16:10 laptop with a camera notch and a thin base.
- Every device pageThe whole set in one list: five iPhone frames, an iPad, an Android phone, a MacBook, a transparent-PNG page and a wallet-app screen.
- Larp wallpapers, sized for iPhone and MacJPEG backgrounds cut to the pixel grid of each iPhone. They are mockups, never proof.
- Screenshot size calculator for the App StoreChoose a device and read off the screenshot sizes App Store Connect takes.
The maker comes from Flexdger Wallet, a crypto wallet mockup that runs in the browser: you choose the balance, the tokens, the name and the avatar, prices are live, and nothing gets installed. This maker needs no account, and whatever it exports is a picture of a screen, never proof of funds.
Not affiliated with Apple, Samsung or Google. The names iPhone, iPad and MacBook belong to Apple Inc., and Samsung and Google own theirs. Each frame on this page is our own drawing, traced from published screen sizes and never taken from a manufacturer's artwork.