What resolution should my screenshot be?

Use the device's native screenshot size when you can. An iPhone 17 Pro captures 1206 × 2622 pixels, which fits the iPhone frame exactly. For browser mockups, a desktop capture around 1280–1440 CSS pixels wide at 2x works well. If the screenshot is a different shape, choose Fill to crop it or Fit to letterbox it.

Can I use these mockups as App Store screenshots?

Not directly. App Store Connect wants exact pixel sizes — 1320 × 2868 for the 6.9-inch iPhone set, for example, or 2064 × 2752 for 13-inch iPad — and Google Play limits screenshots to a 2:1 ratio. Upload raw screenshots or a store-specific template there, and use framed mockups like these on your website, in decks, case studies and social posts.

Are these real Apple device images?

No. Every frame is drawn in code as a generic device in the style of current hardware: thin bezels, a Dynamic Island-style cut-out, a punch-hole camera, a notched laptop lid. Nothing is copied from manufacturer artwork, so you can use the output freely.

How do I take a full-page screenshot of a website?

In Chrome or Edge, open DevTools, press ⌘⇧P (Ctrl+Shift+P on Windows), type "screenshot" and choose Capture full size screenshot. In Firefox, right-click the page, choose Take Screenshot, then Save full page. Long captures are pinned to the top in the browser frame, so your header always shows.

Why is my 3x export smaller than expected?

Very large exports, such as a tall browser capture at 3x, are capped at about 16 million pixels — the largest canvas mobile Safari will open. The size shown above the Download button is always the exact size you will get.

Is my screenshot uploaded anywhere?

No. The mockup is drawn on a canvas in your browser and downloaded directly. Your screenshot never leaves your device.

Device mockup generator

Put any screenshot in an iPhone, Android, iPad, MacBook or browser frame, set the background, shadow and angle, and download a high-resolution PNG that matches the preview exactly. Paste from the clipboard, no signup, no watermark.

Free, no signup
Runs in your browser
Nothing is uploaded

Screenshot

Drop, browse or paste (⌘V / Ctrl+V).

Showing a sample screen until you add yours.

Frame

Frame colour

Screenshot fit

Scene

Padding14%

Shadow

Softness55

Preview

What you see is exactly what downloads.

1,378 × 2,310 px PNG

How it works

How to use the device mockup generator

Add a screenshot

Drop an image, browse for one, or paste straight from the clipboard with ⌘V or Ctrl+V. A sample screen shows until you do.

Pick a frame

iPhone, Android, iPad, MacBook, or a light Safari-style or dark Chrome-style browser window with your own URL in the address bar.

Set the scene

Choose the frame colour, a gradient, solid or transparent background, padding, a soft shadow and a slight rotation.

Download

Export a PNG at 1x, 2x or 3x. The download is drawn by the same renderer as the preview, so it matches pixel for pixel.

Why put a screenshot in a frame

A raw screenshot floating on a page reads as a picture of a screen. Put the same image inside a phone or browser and it reads as a product someone uses. The frame gives scale, tells visitors which platform you are on, and adds the depth that makes a hero section or a case study feel finished. It is the cheapest design upgrade a landing page can get.

Start with a good screenshot

The frame cannot rescue a messy capture. Before you export, I always:

Capture at native resolution. Phone screenshots are already full resolution (an iPhone 17 Pro saves 1206 × 2622). For web apps, set the browser to the width you designed for and capture at 2x so text stays sharp.
Use realistic, flattering data.Real-looking names, round-but-believable numbers, no “Lorem ipsum”, no test accounts, no personal emails.
Tidy the chrome. A full battery, strong signal and a clean status bar. Apple has shown 9:41 on product shots for years, and it has become a convention.
Pick one moment.Show the screen that proves the product's main promise, not the settings page.

Which frame for which job

Job	Frame	Tip
Mobile app landing page	iPhone or Android	Match the platform you launch on first; show both only if you ship both.
SaaS hero image	Browser (light)	Put your real domain in the address bar. It builds trust and costs nothing.
Developer or dark-mode product	Browser (dark)	Use a dark capture too, or the window looks like a mistake.
Case study or portfolio	MacBook or iPad	A slight rotation (3–6°) and a soft shadow add depth without gimmickry.
Slides and documents	Any, transparent background	Transparent PNGs drop onto any slide colour.

Mockups versus App Store screenshots

Store listings have their own rules. App Store Connect accepts screenshots only at exact pixel sizes — 1320 × 2868 for the 6.9-inch iPhone set, for example — and Google Play limits screenshots to a 2:1 ratio. Store screenshots usually work best as the raw screen plus a short headline above it. Framed mockups like the ones this tool makes belong on your own website, in pitch decks, launch posts, Product Hunt galleries and case studies. If you also need social crops, run the exported PNG through the social image size resizer.

Making it look premium

Pull the background from your brand, but quieter: a pale tint or a two-stop gradient of your accent colour beats a loud rainbow.
Leave room. 10–20% padding keeps the device from touching the edges when a platform crops your image.
Keep shadows soft and low.A big, diffuse shadow says “object on a desk”; a hard dark one says 2009.
Be consistent. Use the same frame, angle and background across every image on a page.

Export size and performance

For a website, export at 2x the size the image will be displayed, then convert the PNG to WebP or AVIF before publishing; a framed screenshot often drops to a fraction of its PNG size with no visible difference. Use 3x for print and very large slides. Transparent PNGs are heavy by nature, so only keep the transparency when the image really sits on different backgrounds.

Common mistakes

Stretching a screenshot of the wrong shape into a frame instead of cropping or fitting it.
A tiny 1x screenshot in a big frame — the text turns to blur at 2x.
Mixing devices, angles and shadow styles on one page.
Showing a desktop layout inside a phone frame. Capture the real mobile view.

Need the viewport sizes behind these devices? See the screen sizes reference. For inspiration, browse the best mobile app designs. And if the screen inside the mockup still needs designing, that is exactly what I do in mobile app design.

Common questions