- Prooflive.ai
- Free tools
- Device mockup generator
Free device mockup generator
Show your work the way clients will see it. Drop in a screenshot and get it on a laptop, a phone, a tablet or in a browser window, with a laptop and phone together for a responsive site. High-resolution PNG for portfolios, proposals and social posts.
Your mockup shows here.
How to make a mockup
- Choose a deviceBrowser window, laptop, phone, tablet, or a laptop and phone together.
- Add your screenshotA full-width desktop screenshot for laptops and browsers; a phone screenshot for the phone. Long screenshots show their top.
- Style itDark or light frame, a transparent or coloured background, space around it and a soft shadow.
- DownloadA PNG at twice the size you see, sharp on retina screens and in print.
Good to know
Taking a good screenshot
In Chrome, open the developer tools (Cmd or Ctrl + Shift + I), switch on the device toolbar, set the width (1440 for a laptop, 390 for a phone) and choose Capture screenshot from the menu. You get a clean shot without browser bars, at the right width.
Where to use mockups
- Portfolio pages and case studies
- Proposals and pitch decks, to show the client their own site before it's live
- Social posts announcing a launch
- Ads: a real screenshot in a device reads as real work, not stock
Showing a responsive site
Choose Laptop and phone and add both screenshots: it shows the same site at desktop and phone size in one picture, which is what clients want to see.
Questions
Is the mockup generator free?
Yes. No sign-up, no watermark, and the PNGs are full resolution.
Is my screenshot uploaded?
No. The mockup is drawn in your browser and your screenshot never leaves your device.
What screenshot size should I use?
1440 to 1920 px wide for laptops and browser windows, and a phone screenshot about 390 px wide (1170 px on a retina phone) for phones.
Can I use the mockups commercially?
Yes. The device frames are drawn by the tool, not copied from any brand's product photos, so they're yours to use in client work and ads.
Can I get a transparent background?
Yes. Choose Transparent and the PNG has no background, ready to drop onto any slide or page.
More free tools
Image resizer and cropper
Crop and resize to every Instagram, Facebook, LinkedIn, X and YouTube size.
Background remover
Cut out a person, product or logo with AI, right in your browser. Transparent PNG.
Open Graph checker
How a link looks shared on Facebook, LinkedIn, X, WhatsApp and Slack, and what to fix.
Image compressor
Shrink JPG and PNG files, or convert them to WebP and AVIF, many at once.
Need the website too?
Design it your way and your AI builds it on Prooflive.ai, exactly to the design, with hosting, email and SEO done. Free to build; from £19 a month when it goes live. Designers earn 10 to 20% of every client payment.