About this tool
Device mockup, explained
A device mockup places a screenshot inside a phone, laptop, monitor or browser frame so it looks like the product in use. Drop in a screenshot, pick a frame and a background, and export a PNG for a landing page, a launch post or a pitch deck. Your image stays on your device.
How to use it
- 1Drop a screenshot on the canvas, paste it, or click the upload area in the Device tab. A sample screen shows until you add yours.
- 2Pick a frame (Phone, Android, Tablet, Laptop, Monitor, Browser, Browser dark or Screenshot only), a finish or the text in the address bar, then adjust Size, Scroll position, Rotate, Tilt and Shadow.
- 3In the Background tab, choose a gradient, a solid color or a transparent background and set the padding. In the Text tab, add an optional headline and subheading.
- 4Pick an output size above the canvas, then click Download PNG, Copy, or All formats (.zip) for all six sizes.
How it works
How the mockup is made
The frames are drawn in code rather than taken from photos of real devices. The screen shapes are 9:19.5 for Phone, 9:20 for Android, 3:4 for Tablet, 16:9 for Monitor, and 16:10 for Laptop and both browser frames. The browser frames add a title bar with three window buttons and an address bar showing the text you type, and the device frames come in Graphite, Silver or White.
Your screenshot is scaled to cover the whole screen and centered horizontally. Scroll position sets which part shows vertically, from the top at 0% to the bottom at 100%, and anything that does not fit is cropped. To avoid cropping, use a screenshot with the same shape as the frame: a full phone screenshot for Phone, a desktop window capture for Laptop or Browser.
The output sizes are 4:3 (1600 × 1200), 16:9 (1920 × 1080), 1:1 (1080 × 1080), 4:5 (1080 × 1350), 9:16 (1080 × 1920) and OG (1200 × 630). The device is fitted to the size after the padding and the room for any headline, then scaled by Size, from 30% to 100%. Tilt turns it in 3D, up to 35° either way, and Rotate turns it flat, up to 30°.
Export renders the scene at exactly the chosen dimensions as a PNG, with a transparent background when you pick Transparent. The screenshot is opened locally by your browser and is never uploaded.
When to use it
Ways people use it
Landing page visuals
Show the product in context in a hero or feature section, on a transparent background that sits on any page color.
Launch posts
Export the same mockup in 16:9, square, 4:5 and story sizes in one ZIP, with a headline on top, for each network and launch platform.
Pitch decks and sales slides
Drop the 4:3 or 16:9 PNG into a slide to show the product the way users see it, without a design tool.
Portfolios and case studies
Present client work in a browser, tablet or phone frame so the screens read as finished products.
FAQ
Questions people ask
How do I make a mockup of my app or website?
Take a screenshot at full resolution, place it in a device frame that matches the screen it was taken on, and export the result as an image. Here that means dropping or pasting the screenshot, choosing a frame, and clicking Download PNG.
What screenshot size works best for a phone mockup?
A full-screen capture taken on a recent phone has the right tall shape and fills the frame without awkward cropping. For a long page, use Scroll position to pick the part that shows. Use the original file rather than a compressed copy from a chat app, so the export stays sharp.
Phone, laptop or browser frame: which should I use?
Pick the device your users actually use the product on. A mobile app belongs in a phone, a web app in a browser, laptop or monitor frame, and a tablet app in the tablet frame. For a website that works on both, two mockups side by side show it best.
Can I export a mockup with a transparent background?
Yes. Choose Transparent in the Background tab and the PNG keeps only the device, its shadow and any text, so it sits on any color in a slide or a web page.
How do I take a clean screenshot of a website?
Close extra tabs and hide bookmarks bars, then capture just the browser window. In Chrome, the developer tools device toolbar lets you set an exact window size and capture a screenshot from its menu, which gives you a predictable shape for the frame.