How to Make an iPhone Mockup of Your Website (From Just the URL)

A phone mockup is the fastest way to prove "it works on mobile" - on a landing page, in a pitch deck, in a Product Hunt gallery, or in a client update. The catch is that a good one needs a real mobile render of the page, not a desktop screenshot squeezed into a phone.

Here are three ways to make one, from most manual to fastest, and the details that separate a convincing mockup from an obviously fake one.

What makes a phone mockup look real

Before the methods, the three things that matter:

1. A real mobile viewport. The page must be rendered at a phone width (around 375-430 CSS pixels) so your responsive layout, mobile navigation, and font sizes show up. A shrunken desktop page is the most common giveaway.
2. High pixel density. Phones render at 3x. A 1x screenshot looks soft inside a crisp device frame. Capture at 3x, or at least 2x.
3. The top of the page, settled. Capture after fonts, images, and animations have loaded - and without the cookie banner covering half the screen.

Method 1: DevTools + a design tool

The fully manual route, free and flexible:

1. Open your site in Chrome, open DevTools, and toggle the device toolbar.
2. Choose an iPhone preset (or set a width of about 390 px) and set the device pixel ratio to 3.
3. Use the DevTools menu to "Capture screenshot" (viewport, not full size).
4. Place the image inside an iPhone frame in Figma, Keynote, or Photoshop, and mask it to the screen area.
5. Add a background and shadow, then export.

Good for: one-off images where you want total control. Slow when: you need several pages, several sizes, or to redo it when the site changes.

Method 2: Mockup templates

Smart-object templates (PSD or Figma) let you drop a screenshot into a pre-built device scene. They look polished, but you still need a correct mobile screenshot (method 1, steps 1-3), and each template is a fixed composition - changing the background or canvas size means another template.

Good for: a specific stylised scene, such as a phone held in a hand. Slow when: you need consistent images across many sizes.

Method 3: Straight from the URL

If the goal is "our site, in an iPhone, on a clean background", you can skip the screenshot step entirely:

1. Paste your URL into the iPhone mockup from URL tool.
2. Choose Phone. The page is rendered at a real mobile viewport and high density - your responsive layout is what appears in the frame.
3. Pick a background, padding, and shadow.
4. Choose a canvas: fit to device for a website, Story (1080 × 1920) for Instagram or LinkedIn stories, or Portrait (1080 × 1350) for feeds.
5. Download the HD PNG, or copy a share link.

You can try it on the homepage without signing up - the preview runs on your real URL.

Laptop + phone together

For a landing page hero or the first Product Hunt image, a single phone can feel small. A laptop and phone combo shows desktop and mobile layouts in one image and says "responsive" without a caption. Both screens are captured from the same URL, at the right viewport for each device. See the laptop and phone mockup tool.

Common problems and fixes

The phone shows the desktop site

The page was captured at a desktop width. Make sure the capture uses a mobile viewport - or, if you uploaded a screenshot, that the screenshot was taken in mobile mode.

The page is blank or half-loaded

Some sites load content after the first paint (animations, lazy images, client-side rendering). Add a short delay (two to five seconds) before capture.

A cookie banner covers the screen

On a phone, consent banners can take up a third of the viewport. Capture with cookie banners blocked, or dismiss the banner and upload the screenshot. More in how to take clean website screenshots.

The page needs a login

A URL-based capture sees what a logged-out visitor sees. For app screens, take the screenshot in mobile mode yourself and upload it - here is the workflow.

FAQ

What screen size should an iPhone screenshot be for a mockup?

Render at a phone viewport of about 375-430 CSS pixels wide at 3x density. That gives you an image roughly 1125-1290 pixels wide - sharp enough for any mockup.

Can I make a phone mockup without Photoshop or Figma?

Yes. A URL-based mockup generator renders the mobile page and places it in the device frame for you, so no design tool is needed.

Is it free?

On URL2Mockup, the homepage preview is free with no signup, and new accounts get free credits for their first mockups. HD downloads are included with every mockup.

Related reading: How to turn any URL into a device mockup · App Store-style screenshots for web products