Device Mockup Generator

Drop a screenshot into a phone, tablet, laptop or browser frame and export a PNG.

Ad placeholder (leaderboard)
Enjoying the tools? Go Pro for £4.99 (one-time) and remove all ads — forever, on this device. Remove ads — £4.99

A device mockup generator that places any screenshot inside a clean phone, tablet, laptop or browser frame, drops it onto a styled background, and exports a high-resolution PNG — all without uploading a single pixel. It is built for founders preparing App Store and Play Store screenshots, designers assembling landing-page hero images, marketers making social cards, and anyone who wants a raw screen capture to look like a polished product shot in seconds.

How it works

Every frame is drawn directly on an HTML canvas rather than pasted from a stock image, so the output is sharp at any resolution and the device colour, corner radius and proportions are fully adjustable. When you upload a screenshot it is decoded locally and painted into the device’s screen region. You choose how it sits there: Cover fills the screen and crops the overflow to match the device’s aspect ratio, while Contain shows the whole image with a letterbox colour behind it so nothing is lost.

Around the device the tool composites a background of your choice — a two-colour gradient at any angle, a solid colour, or a fully transparent canvas for dropping the frame onto other artwork. A soft drop shadow lifts the device off the background, and a padding control sets how much breathing room surrounds it. The browser frame adds realistic window chrome: traffic-light buttons, an editable address bar and an optional dark mode.

Because the entire pipeline is client-side, nothing is ever transmitted — ideal for unreleased features, internal tools and NDA-bound work. Your last-used device, colours and shadow settings are saved in localStorage, so the tool reopens exactly how you left it. When you are happy, export a PNG at up to 3x resolution, or copy the image straight to your clipboard to paste into a deck or design tool.

Example

Suppose you have just shipped a new mobile dashboard and need a hero image for the marketing site. Upload the 1170 × 2532 screenshot, pick the App Store phone preset, switch the background to a purple-to-blue gradient at 160°, and bump the export resolution to 2x. In a few clicks you have a retina-ready PNG of your app sitting inside a notched phone with a soft shadow — ready to drop onto the landing page.

Use caseFrameBackgroundExport
App Store listingPhoneBrand gradient2x
SaaS landing heroBrowserLight solid1.5x
Pitch-deck slideLaptopDark gradient2x
Overlay on artworkPhoneTransparent3x

Every figure and pixel is produced in your browser — no screenshot is ever uploaded or stored.

Ad placeholder (rectangle)