Free device mockup generator
A device mockup places your product screenshot inside a realistic device frame, so people instantly understand where and how your product is used. Mockups are common on landing pages, launch listings, app store pages, documentation and social posts.
This tool lets you drop in a screenshot, choose a browser, phone, tablet, laptop, monitor or watch frame, and download a PNG with a transparent background. There is no sign-up and no watermark, and your screenshot never leaves your browser.
Which device should you choose?
| Device | Best for |
|---|---|
| Browser window | Landing pages, SaaS dashboards and web app screenshots. The window height follows your screenshot, so nothing is cropped. Light and dark themes. |
| Phone | Mobile app screens and responsive pages. Works with iPhone and Android screenshots. |
| Tablet | Tablet layouts and apps with a larger touch screen. |
| Laptop | Product hero images and Product Hunt galleries that show a desktop app. |
| Monitor | Wide dashboards and design tools shown on a desktop display. |
| Watch | Wearable app screens and glanceable widgets. |
How to make a mockup with a transparent background
- Drop a PNG, JPG, WebP or SVG screenshot into the tool.
- Pick a device and, if you like, a frame color. Use Fill to crop or Fit to show the whole image.
- Choose the 1x or 2x export size and download the PNG.
- Place the transparent PNG on any background in your page or design tool.
Frequently asked questions
Is this device mockup generator free?
Yes. It is free to use, does not require an account, and does not add a watermark to your PNG.
Does the PNG have a transparent background?
Yes. The mockup is exported on a transparent background so you can place it on any page, slide or design. If you keep the soft shadow, it is exported as semi-transparent pixels around the device. Turn the shadow off for a tight crop.
Is my screenshot uploaded?
No. Your screenshot is drawn into the device frame and exported entirely in your browser. It is not uploaded or saved to a Firsto account.
Are these official Apple or Samsung device frames?
No. The frames are generic illustrations drawn by this tool and are not affiliated with or endorsed by any device maker. You can still use iPhone, Android, Mac or Windows screenshots as the screen content.
What screenshot size should I use?
Use a screenshot at least as large as the screen you are filling. The phone screen is 390 × 844, the tablet 768 × 1024, the laptop 1440 × 900 and the monitor 1600 × 900. The 2x export doubles the output size, so larger screenshots look sharper.
Where can I use the exported mockup?
Use the transparent PNG in your landing page, Product Hunt or directory listing gallery, README, presentation, social post or any design tool such as Figma, Canva or Keynote.