Skip to content
Convertto

Device Mockup Generator — iPhone, Android, iPad, Mac & Browser Frames

Drop a screenshot into a real device frame, angle it, light it and export it at any size.

To make a device mockup, upload a screenshot and choose a frame — iPhone, Pixel, Galaxy, iPad, MacBook, monitor, Apple Watch, TV or a browser window. The capture is drawn inside the frame at that hardware's real aspect ratio and corner radius, then you can angle the device with a perspective camera, add a second device, light it with a shadow and reflection, and export at any canvas size up to 3× resolution with no watermark.

Runs in your browser
Watermark
None — the export is exactly what you see
Devices
30 frames from iPhone and Pixel to Apple Watch and 4K TV
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Why does my screenshot look cropped inside the phone frame?

The screen has a fixed aspect ratio and "Fill the screen" scales your capture to cover it, so a 16:9 capture in a 9:19.5 frame loses its left and right edges. Switch the fit to "Fit width, from the top" — the capture keeps its own proportions and you see the first screenful — or pick a frame closer to your capture, such as a browser window or the iPhone SE.

How do I get a mockup with a transparent background?

Turn on "Transparent background". The export becomes a PNG with alpha so the device sits cleanly on any slide or landing page, and the format selector is ignored because JPG has no alpha channel and lossy WebP does not carry one reliably. The shadow is drawn into the alpha too, so it stays soft against whatever you drop it onto.

Can I put two devices in one image?

Yes — choose a scene other than "Single" and a second device appears in the inspector. Hero pair puts a phone over the corner of a laptop, which is the standard responsive shot; side by side, angled and trio give you the other common arrangements. Upload one screenshot per device and they fill the frames in order.

Is the angled view a real perspective or a skew?

A real one-point projection. The finished device — frame, bezel, screen and all — is sliced into columns and each column is drawn at the size its depth calls for, so the far edge genuinely gets shorter and the bezel thins on that side. A CSS-style skew keeps both edges the same height, which is the tell that gives most flat mockups away.

What size should I export for the App Store?

Choose the 6.9-inch preset, 1320 × 2868. One 6.9-inch set covers the current requirement and Apple scales it down for smaller iPhones. If you still support the older listing, 1290 × 2796 is the 6.7-inch size. Both are in the canvas list, so the mockup is composed at exactly the resolution the submission needs rather than resized afterwards.

My full-page website capture is 6000px tall — what fit should I use?

"Fit width, from the top." Fill the screen would crop away everything but a band from the middle, and fit-whole-capture shrinks it to an unreadable strip. Fit-width shows the top of the page at full width inside the frame, which is what a browser mockup is there to show in the first place.

How to use the device mockup generator

  1. 1Upload the screenshot you want framed.
  2. 2Pick a device — the frame takes that hardware's real aspect ratio and corner radius.
  3. 3Choose a scene if you want more than one device in the shot.
  4. 4Angle it with the camera, then set the background, shadow and canvas size.
  5. 5Download the PNG, JPG or WebP, or copy it straight to the clipboard.

Embed this tool

Put the working device mockup generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Last updated

More design studio