Device Mockup Generator

What This Device Mockup Generator Does

A device mockup places a flat screenshot inside a realistic phone, tablet, or laptop frame so it looks like a real product being used. This generator draws the frame on a canvas in your browser, fits your screenshot into the screen area with a cover crop, and exports the result as a high-resolution PNG. You can switch between three device sizes, choose a frame finish, and set any background color for the scene.

Designers use mockups for app store listings, portfolio case studies, landing page hero images, and client presentations. Because everything is drawn locally, unpublished product screenshots never leave your computer.

How to Use It

1. Upload a screenshot, or drag and drop one onto the preview area. PNG, JPG, and WebP work.
2. Pick a device: Phone (390 × 844), Tablet (820 × 1180), or Laptop (1440 × 900). The preview and output dimensions update instantly.
3. Choose a frame finish such as Midnight Black, Space Gray, Silver, or Bronze.
4. Set the background color with the swatch or by typing a hex value.
5. Press Download Mockup to save a PNG at the full output size shown under the preview.

Which Screenshot Size Should You Use

The cleanest result comes from a screenshot captured at the device's native resolution listed above. The tool scales your image with a cover fit, which means it fills the screen completely and crops the excess from the center rather than stretching or adding letterbox bars. A screenshot that is slightly larger than the screen size works especially well because the crop trims edges without any softness.

If your capture is much wider or taller than the frame, important interface elements near the edges may be cropped away. Resize or re-capture so the aspect ratio is close to the device before uploading, and use the Image Resizer if you need an exact size.

Device Frames Explained

Phone (390 × 844) matches a modern 6.1-inch handset, the most common canvas for mobile app marketing. The frame is drawn with a notch and rounded corners, which immediately signals mobile. Tablet (820 × 1180) suits reading, drawing, and dashboard apps where the extra vertical space matters. Laptop (1440 × 900) draws a lid with a base and a small trackpad cutout, ideal for web apps, dashboards, and desktop software.

Mockup Design Tips

Keep the background neutral for store listings, where the surrounding platform already provides its own styling, and reserve bold colors for presentations and social posts. Leave generous space around the device: the generator adds a fixed margin so the frame never touches the edge. Avoid duplicating the same frame at the same angle repeatedly in a gallery; instead, vary device, background, and screenshot so each slide feels distinct.

Export at the full output size and let the platform downscale. A large PNG keeps text crisp on retina screens, and file size is rarely a problem for a single hero image. If you need a smaller file for the web, run the export through the Image Compressor afterwards.

When to Use a Mockup Instead of a Plain Screenshot

A raw screenshot answers the question "what does the screen look like" but gives no sense of scale. A framed mockup answers "how would this feel in someone's hand", which is why app stores, portfolios, and launch posts lean on them. Use mockups when context matters: a landing page hero, an app store screenshot slot, a slide about a mobile feature. Use plain screenshots in documentation and bug reports, where readers want the pixels, not the presentation.

Related Tools

Prepare screenshots with the Image Resizer, shrink exports with the Image Compressor, pull brand colors out of a design with the Image Color Extractor, or capture quick references with the Screenshot Tool.