Sifency Tools
Let’s Talk

Mobile app mockup generator

A launch page needs a few strong pictures, not a folder of raw screenshots. Frame your best app screen in a phone, set a background in your brand colours, and export it at the gallery size in one go. 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-1270x760.png · 1270 × 760 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 mobile app mockup

How do I make a mobile app 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 Product Hunt gallery (1270 × 760 px), and change the background, padding and shadow as you like. Pick three screens that tell a story, such as the home view, the main action and the result, and give each the same background so the set looks planned.

Can I show two app screens in one picture?

Yes. Turn on the second device in the inspector, pick another phone or any frame, and move it with the two offset sliders. Both frames share the rotation, the corner radius and the shadow settings.

Which image size should I use for a mobile app mockup?

The gallery size is wide, so add a second device beside the first to fill the space instead of leaving large empty areas on either side of one phone. In the Size list choose Product Hunt gallery, which is 1270 × 760 px.

Is anything uploaded when I make a mobile app mockup?

No. Your screenshot is read and drawn into the phone frame by your own browser, so the picture behind your mobile app 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
Contrast CheckerCheck WCAG contrast and fix failing colours in one click.Open toolColour Placeholder GeneratorExact-size placeholder images in any colour, named for you.Open toolPalette from ImageDrop an image, get a palette you can paste into code.Open toolFavicon and App Icon GeneratorOne image in, every icon and the HTML snippet out.Open tool

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.