Sifency Tools

Phone mockup generator

A tall, slim frame is the quickest way to show an app screen the way people will hold it. Drop a screenshot and the phone is drawn around it, with rounded corners and a small camera dot, ready for a shop page or a pitch. Nothing is uploaded: the picture is drawn in your browser.

Studio

Your screenshot appears here

Drop, paste or browse for a screenshot, or try an example.

Drop a screenshot here

Or paste one with Ctrl+V. PNG, JPG, WebP, GIF, AVIF or BMP, up to 25 MB.

Phone frame · no screenshot yet

Export

Saves as mockup-phone-1080x1080.png · 1080 × 1080 px · PNG · 1x

Copy image always copies a PNG at the chosen scale.

Add a screenshot to enable Download and Copy image.

More mockup ideas

How it works

  1. Add a screenshot

    Drop, paste or browse for a screenshot of your design (PNG, JPG, WebP, GIF, AVIF or BMP), or start with an example. Your own browser reads it and nothing is uploaded.

  2. Choose a device and a background

    Pick a phone, tablet, laptop, browser window or monitor, then set a solid, gradient, mesh or transparent background, the padding, the corner radius, the shadow, the bezel colour and, if you like, a second device.

  3. Pick a size

    Use a ready-made size for a marketplace preview, a Product Hunt gallery, Dribbble, Behance or a social post, or type your own width and height.

  4. Download or copy

    Save the mockup as a PNG or WebP at normal or double size, or copy it straight to your clipboard to paste into a chat or a document.

Questions about a phone mockup

How do I make a phone mockup?

Drop, paste or browse for a screenshot, or try the example. The phone frame is drawn around it at once. Then open Size and choose Square post (1080 × 1080 px), and change the background, padding and shadow as you like. Use a screenshot that already has the phone's tall shape, about 18 by 39. A wider picture is fitted inside the screen with dark bars at the sides.

What shape should my screenshot be for the phone frame?

Tall and narrow, close to 18 by 39. Capture the screen at your device's own size and drop it in as it is. A picture of another shape is fitted inside the screen, so nothing is cut off.

Which image size should I use for a phone mockup?

A square post size keeps a single tall phone centred with room on both sides, so it crops well in a photo feed and still reads clearly on a small screen. In the Size list choose Square post, which is 1080 × 1080 px.

Is anything uploaded when I make a phone mockup?

No. Your screenshot is read and drawn into the phone frame by your own browser, so the picture behind your phone mockup never reaches a server, and Download and Copy image work on your device.

Next step

Fill the rest of the page with placeholders

A mockup often needs filler images around it. Make exact-size colour placeholders with proper file names, and download a whole set as one ZIP.

Make placeholder images
View all tools

About these tools

Small tools, made by Sifency

Sifency is a small studio that builds themes, plugins and web apps. These tools began as the things we kept needing ourselves, so we tidied them up and left them open for everyone. There is nothing to sign up for.