Website mockup (screenshot on laptop and phone)
Choose the desktop screenshot of the site and, if you want, the mobile screenshot. The tool fits the images into the devices and builds the presentation image.
How to useYour site on a laptop and a phone
Website mockup (screenshot on laptop and phone): what it is for
Choose the desktop screenshot of the site and, if you want, the mobile one (without it, the phone uses the same screenshot). The tool fits the images into the laptop and phone, with a shadow, over a gradient or transparent background.
There are formats for landscape, Instagram square and portrait, and link preview images (1200×630). The image downloads as PNG and nothing leaves your device.
How to use
- Choose the desktop and mobile screenshots.
- Choose the background colors and format.
- Download the mockup as PNG.
When to use it
- Showing a client their finished site.
- Portfolio posts for designers and agencies.
- Images for proposals and quotes.
Frequently asked questions
What screenshot size should I use?
For the laptop, a full-screen screenshot in 16:10 or 16:9 (for example 1440×900). For the phone, a screenshot from the device or from the browser's mobile view (for example 390×844). Larger screenshots are cropped from the top.
How do I take a mobile screenshot on my computer?
In Chrome, open the developer tools (F12), turn on device mode (Ctrl+Shift+M), choose a phone and use Capture screenshot from the three-dot menu.
Are the images uploaded to a server?
No. The mockup is built in your browser and the image downloads straight to your device.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.