Device Mockup Generator

About Device Mockup Generator

The Device Mockup Generator drops a screenshot into a real device frame: an iPhone with the Dynamic Island, an Android phone, an iPad, a MacBook Pro, a browser window with its tab strip and address bar, or a desktop monitor on a stand. Every frame is drawn at the true screen proportions of that device, so what you export is what the screenshot would actually look like on the hardware. The frame is painted on a canvas inside your own browser tab, which means a screenshot of an unreleased app or an internal dashboard never leaves your machine.

The three frames people reach for most

A frame is a shortcut for the reader: it tells them in a glance whether they are looking at a phone app, a web page or a desktop tool, before they have read a single word inside the screenshot.

The crop meter: the part most mockup tools leave out

A device screen has a fixed shape. An iPhone screen is 1179 by 2556, which is roughly 9:19.5, and almost nothing you screenshot is exactly that. Most mockup generators quietly scale your image until it covers the screen and throw away whatever hangs over the edge, so you find out that the bottom of your pricing table is gone only after you have posted it.

This tool measures it instead. In Fill screen mode the meter under the fit buttons reports the exact percentage of your screenshot that the frame is hiding, and the bar turns from green to red as that number climbs. If it is higher than you like you have two ways out:

• Pan. The slider moves the visible window along whichever axis is overflowing, so you can hold on to the header, the middle or the footer instead of accepting a centred crop.
• Fit whole. The screenshot is scaled until every pixel of it is inside the screen, and the leftover strips are filled with a colour you choose. Nothing is cropped, at the cost of visible bands top and bottom, or left and right.

A good rule: under about 8% cropped is invisible to a reader, 8% to 25% is fine if you have panned to keep the subject, and past 25% you should either re-take the screenshot at the device aspect ratio or switch to Fit whole.

Which frame, and at what resolution

Screenshots at those pixel sizes or larger stay crisp at every export size. Smaller ones are scaled up, and the first thing to give way is the anti-aliasing on small text inside the screenshot.

How to Use the Device Mockup Generator: step by step

1. Add your screenshot: drop a PNG or JPG on the upload panel, click it to browse, or press Ctrl+V to paste one straight from the clipboard.
2. Choose a device frame: iPhone, Android, iPad, MacBook, Browser or Monitor. Phone and tablet frames also switch between portrait and landscape.
3. Check the crop meter: if too much is hidden, drag the pan slider or switch to Fit whole so nothing is lost.
4. Style the frame: set the frame colour, background, padding, shadow and glare. On the browser frame, type your own tab title and address.
5. Export: pick an export size, then Download PNG to save the mockup or Copy image to paste it into a post.

Practical tips

• Take the screenshot at the device aspect ratio when you can. A browser window resized to 1179 by 2556 before you capture makes the crop meter read 0% and the mockup pixel-perfect.
• Use the browser frame when the URL matters. Typing your own domain into the address bar puts your brand in the image without adding a caption.
• Keep padding between 6% and 12%. Less and the device touches the edge of the post; more and the screen becomes unreadable in a feed.
• Match the frame colour to the screenshot. Space Black under a dark-mode screenshot, Silver or Titanium under a light one; the browser chrome follows the same choice automatically.
• Turn the glare down for text-heavy screens. A subtle sheen reads as glass, a strong one reads as a stock photo and hides your copy.
• Export transparent for slides. The NONE background gives you a floating device with its shadow, ready to drop onto any deck or hero section.

Privacy

Everything happens in the browser tab through the HTML5 canvas API. Your screenshot is read from a local object URL, drawn into the frame, and encoded to PNG by the browser itself. No image is uploaded, stored or transmitted, and once the page has loaded the tool keeps working with no network connection.

Frequently Asked Questions

Is my screenshot uploaded to a server?

No. The device frames are drawn with the HTML5 canvas API inside your own browser tab, and your screenshot is read from a local object URL. Nothing is sent anywhere, so mockups of unreleased apps, internal dashboards or client work stay on your machine. After the page has loaded the tool keeps working with no network connection at all.

Which device frames are available?

Six: an iPhone with the Dynamic Island, an Android phone with a punch-hole camera, an iPad Pro, a MacBook Pro with the notch and the base, a browser window with a tab strip and address bar, and a desktop monitor on a stand. Each frame uses the real screen proportions of that device, so a mockup made here matches what the screenshot would look like on the hardware.

My screenshot is not the same shape as the device screen. What happens?

That is what the crop meter is for. Fill screen scales the screenshot until it covers the whole screen, which crops whatever hangs over the edge, and the meter tells you the exact percentage that is hidden. The pan slider then moves the visible window along the cropped axis so you can keep the important part. Fit whole scales the screenshot until all of it is inside the screen and pads the remaining strips with a colour you choose, so nothing is lost.

What resolution should my screenshot be?

Match the device you are framing: 1179 by 2556 for the iPhone, 1080 by 2400 for the Android phone, 1668 by 2388 for the iPad, 3024 by 1964 for the MacBook, 1440 by 900 for the browser window and 2560 by 1440 for the monitor. Anything of that size or larger stays sharp. Smaller screenshots still work, but they are scaled up and soft edges become visible around text.

Can I export the device on a transparent background?

Yes. Pick the NONE background swatch and the padding around the device is exported as alpha instead of colour, while the frame, the screen and the drop shadow are still drawn. Download PNG keeps that transparency, which is what you want when the mockup is going onto a slide, a hero section or a page whose own background should show through.

Why does the browser frame turn dark?

The browser chrome follows the frame colour you choose. Pick Space Black and the tab strip, toolbar and address bar switch to a dark theme so the mockup matches a dark-mode screenshot; any of the lighter frame colours give you the light theme. The tab title and the address are plain text fields, so you can put your own product name and domain in the image.

Image Tools:

• Add Line to Image
• Add Text to Image Popular
• ⬛ Aspect Ratio Calculator Popular
• Circle Crop Image New
• Collage Maker
• Connect the Dots Generator Popular
• EXIF Data Viewer/Remover New
• Flip GIF
• Flip Image
• GIF Maker
• Image Censor
• Image Compressor Popular
• Image Cropper Popular
• Image Enhancer Popular
• Image Resizer Popular
• Image Rotator
• Image Splitter Popular
• Image to ASCII Art Converter New
• Image to SVG Tracer New
• Lorem Picsum / Placeholder Image Generator New
• Image to Text Converter (OCR) Popular
• Print Size & Resolution Calculator (DPI/PPI)
• Round Corner Image Generator New
• Screenshot Beautifier New
• Device Mockup Generator New
• Add Drop Shadow to Image New
• Add Border to Image New