Device mockup generator

A mockup shows a screenshot on a device: a website on a laptop, an app on a phone. It tells people at a glance what kind of product it is, which is why mockups turn up on landing pages, portfolios, pitch decks and app launches. There are four frames: a laptop with a 16:10 screen, a phone with a tall 9:19.5 screen and a pill-shaped camera cut-out, an upright 3:4 tablet, and a browser window.

The result looks best when the screenshot already has the device's shape. A full-screen capture from a MacBook is 16:10 and fills the laptop exactly, and a screenshot from a recent iPhone matches the phone. With Fill screen, a 16:9 capture on the laptop loses a thin strip from each side, and a long page capture is cut from the top so the header stays in view. Show whole image keeps everything and adds black bars instead.

The browser frame works differently. It has no fixed screen shape, so the window takes the shape of your screenshot and the address bar shows text you type. That suits website captures of any height. The devices come in Space black or Silver, and the browser in dark or light. Choose the one that stands out from where the mockup will sit: silver on dark pages, black on light ones.

The background starts transparent, so the PNG drops onto your own slide or design with just the device and its shadow. Choose WebP for a smaller file on a website, or add a gradient or colour if the image will be posted on its own. JPG always fills the background with white. On the laptop, phone and tablet, the screen is drawn at your screenshot's width, between 600 and 2,400 pixels, so a sharp capture gives a sharp mockup.