A device mockup is the fastest way to show what a website looks like in the real world. Instead of a flat screenshot, you get the site framed inside a laptop, a tablet and a phone, placed on a clean background, with the site name underneath. The Website Device Mockup tool from Tooliqo builds that image for you in a few seconds: paste a link, watch the site load on the three devices, click Capture & export, and the finished picture is downloaded to your computer.
The tool runs entirely in your browser. Nothing is uploaded to a server, no account is needed, and the result can be saved as PNG, JPEG or WebP at up to 4800 x 2700 pixels. It is available in English, Spanish, French, Arabic, Chinese and Hindi, and it can be embedded on any website with one line of code.
What the tool does
The idea is simple. You give the tool a website address, and it opens that address three times, once in each device: a laptop with a 1440 pixel wide screen, a tablet with an 820 pixel wide screen and a phone with a 390 pixel wide screen. Because each screen is a real browser window scaled down to fit the frame, the website reacts exactly as it would on those devices: menus collapse, columns stack, images resize. You see the real responsive behaviour of the page, not a simulation.
Once the site is displayed, the tool can turn the scene into an image. It captures the content of each screen, composes it inside sharp vector device frames, adds the background, the shadow and the caption, and downloads the result. You can produce one picture with all three devices together, one picture per device, or both at the same time.
- Live preview of any public website on a laptop, a tablet and a phone.
- One-click capture and export, with no screenshot to prepare by hand.
- Combined image, one image per device, or both.
- Nine ready-made backgrounds, a custom colour, a transparent background and two frame styles.
- Optional caption with the site name and the address.
- Export sizes of 1600 x 900, 3200 x 1800 and 4800 x 2700 pixels in PNG, JPEG or WebP.
- Copy to clipboard, fullscreen mode and six interface languages.
Who needs a device mockup
Device mockups are everywhere once you start noticing them. A few situations where this tool saves real time:
- Template and theme sellers who need a presentation image for every demo, on marketplaces, in blog posts and in product listings.
- Web designers and freelancers presenting a finished project to a client or adding it to a portfolio.
- Bloggers and marketers who want an attractive image for a social post, a newsletter or a case study.
- Developers documenting a responsive layout and checking in one glance how a page behaves on three screen sizes.
- Agencies producing proposal visuals quickly, without opening a design application.
How it works, step by step
Step 1: paste the address
Type or paste the website address in the large field at the top of the tool. You do not need to write https://; the tool adds it for you. Press Enter or click Preview. The site opens on the three devices, and a small spinner shows on each screen until the page has finished loading. The button next to the field opens the same address in a new browser tab if you want to check the original page.
Step 2: look at the live preview
Each screen is a real, scrollable window. Scroll inside the laptop, the tablet or the phone to bring the part of the page you want to show into view, for example the hero section or a product grid. The capture uses exactly what you see, so this is the moment to position each screen the way you like.
If a screen stays blank, the website refuses to be displayed inside other pages. This is a security setting chosen by the site owner, and many large platforms use it. In that case the manual screenshot option described later still works perfectly.
Step 3: choose the look
Above the action buttons, the options panel lets you adjust the scene:
- Devices: tick or untick the laptop, the tablet and the phone. With three devices the tool uses the classic overlapping composition; with one or two devices they are centred and enlarged automatically.
- Background: navy, ocean, sunset, emerald, graphite, violet, light, white, transparent, or any colour you pick with the last swatch.
- Frame: dark or silver device bodies.
- Caption: a title under the devices, which defaults to the site name, plus an optional line with the address.
- Export: the image size, the file format and whether you want all devices in one image, one image per device, or both.
Step 4: capture and export
Click Capture & export. Your browser shows a small dialog asking you to share the current tab. Choose the tab and confirm. For about two seconds the tool enlarges each screen one after the other on a coloured background, takes a high-resolution picture of it, and then returns to the normal view. The screens are placed inside the device frames, the final image is generated, and the download starts.
The result also appears in a panel under the buttons, with a preview and a Save image button for every file, so you can save it again at any time or open it in a new tab.
Step 5: adjust and export again
The captured screens stay in the tool. You can change the background, the caption, the frame or the export size and click Download image to get a new version instantly, without capturing again. Click Live preview whenever you want to go back to the real pages, scroll to a different section and capture once more.
The four buttons
| Button | What it does |
|---|---|
| Live preview | Loads the address from the field and shows the real website on the devices. Use it to reload a page or to return from the captured view. |
| Capture & export | Asks the browser to share the current tab, captures each device screen exactly as displayed, builds the mockup and downloads it according to the export options. |
| Download image | Generates the mockup from the screens already captured or uploaded and downloads it. If nothing has been captured yet, it starts a capture first. |
| Copy to clipboard | Puts the combined mockup in the clipboard as a PNG so you can paste it directly into a chat, an e-mail, a document or a design tool. |
Export options in detail
| Option | Choices | Notes |
|---|---|---|
| Size | 1600 x 900, 3200 x 1800, 4800 x 2700 | The 2x size is the best balance for blogs and marketplaces. The 3x size is meant for print or large banners. |
| Format | PNG, JPEG, WebP | PNG keeps transparency and sharp text. JPEG gives the smallest file for photographs. WebP is shown only when the browser can produce it. |
| Images | All devices in one image, one image per device, both | With "both" you receive the combined picture plus a separate mockup for each selected device. |
| Background | Nine presets, custom colour, transparent | A transparent PNG lets you place the devices on your own artwork. |
| Frame | Dark, silver | Silver frames work well on light and white backgrounds. |
| Caption | On or off, custom text, show address | The caption colour adapts automatically to dark and light backgrounds. |
Why the browser asks you to share the tab
This is the part that surprises people the first time, so it deserves a clear explanation. For security reasons, a web page is never allowed to read the pixels of another website displayed inside it. If the tool simply tried to draw the three screens into an image, the browser would block it and the devices would come out empty. The only honest way to capture what you see is the screen sharing feature built into modern browsers, which always asks for your permission first.
That is why clicking Capture & export opens a sharing dialog. Nothing is sent anywhere: the picture of the tab is handed to the tool inside your own browser, the three screens are cut out of it, and the sharing stops by itself as soon as the last screen has been captured. The whole process takes about two seconds. No video is recorded and no data leaves your computer.
Manual screenshots as an alternative
Screen capture is a desktop feature. On phones and tablets, and in a few browsers, the capture button is not available. The tool detects this and opens the manual upload cards instead. The same cards can be opened at any time with the Upload screenshots manually link in the export options. They are also the right choice when a website refuses to be displayed inside other pages.
For each device you can choose an image file or drag a picture directly onto the device screen. Full-page screenshots are welcome: the image is fitted to the screen width and a slider lets you choose which part of the page is visible. A few quick ways to take the screenshots:
- On Windows, press Win + Shift + S to capture any area of the screen.
- On a Mac, press Cmd + Shift + 4 and draw a rectangle.
- In Chrome, Edge or Firefox, open the developer tools, switch on the device toolbar, pick a phone or tablet size and use the "capture screenshot" command to get a pixel-perfect mobile view.
Tips for a better mockup
- Use a large browser window. The screens are captured at the size they are displayed. A maximised window on a full HD or Retina screen gives the sharpest result.
- Scroll before you capture. Show the strongest part of the page: the header and hero section usually make the best mockups.
- Prefer the 2x size. It is sharp enough for any blog, store or social network while keeping the file reasonable.
- Try the single-device images. The phone-only mockup is ideal for vertical social formats, while the laptop-only mockup suits wide banners.
- Use transparent PNG for layouts. You can then place the devices over your own gradient, photo or brand colours in any editor.
- Keep the caption short. The site name alone often looks cleaner than a long slogan.
Troubleshooting
| Problem | Explanation and solution |
|---|---|
| The screens stay white | The website blocks embedding (a setting called X-Frame-Options or a frame-ancestors policy). Use the manual screenshot cards for that site. |
| The capture button says it is blocked | The tool is displayed inside another page that does not allow screen capture. Click "Open the tool in a new tab" and capture from there. |
| The capture dialog did not appear | Screen capture needs a desktop browser and a secure page (https). On phones, use the manual upload instead. |
| Nothing was downloaded | Look at the result panel under the buttons: every image has its own Save button. Some browsers ask for permission before downloading several files at once. |
| The colours look slightly different | Screen capture converts the picture through the video pipeline of the browser, which can shift very saturated colours a little. Normal page colours are not affected in a visible way. |
| The page scroll position was lost | Scroll positions are kept while you switch between the live and captured views. If a page reloads itself, scroll again and capture once more. |
Browser support
| Feature | Chrome and Edge | Firefox | Safari (Mac) | Phones and tablets |
|---|---|---|---|---|
| Live preview | Yes | Yes | Yes | Yes |
| Capture & export | Yes, one click on "Share" | Yes, choose the browser window | Yes, allow screen observation | No, manual upload instead |
| Download image | Yes | Yes | Yes | Yes |
| Copy to clipboard | Yes | Recent versions | Yes | Limited |
| WebP export | Yes | No, PNG and JPEG | Recent versions | Varies |
Privacy
The tool is a single page that runs in your browser. The address you type is only used to open the website inside the device screens. Screenshots you upload are read locally and never leave your device. The screen capture is processed in memory and discarded as soon as the mockup is built. The only thing stored is a short list of your recent addresses, kept in your own browser to save typing next time.
Frequently asked questions
Is the tool free?
Yes. There is no registration, no watermark on the exported images and no limit on the number of mockups you can create.
Can I use the images commercially?
The device frames and backgrounds are original designs and the images you create are yours to use in portfolios, listings, articles and advertising. You remain responsible for the rights of the website content shown on the screens.
Why does the tool not simply take the screenshot without asking?
Because browsers forbid a page from reading the content of other websites. The sharing dialog is the permission step that makes a direct capture possible. It appears once per capture and the sharing ends automatically.
Can I mockup a page that is not online yet?
Yes. Take screenshots of your local page at the three sizes and upload them with the manual cards. The device frames, backgrounds and export options work exactly the same way.
Which size should I choose for a blog or a marketplace?
The 3200 x 1800 size in PNG is sharp on every screen and still light enough to upload. Switch to JPEG if the platform limits file size, or to 1600 x 900 for a quick preview.
Does the tool work on my phone?
The live preview, the backgrounds and the manual screenshot export all work on phones. Only the direct capture button needs a desktop browser, because mobile browsers do not offer screen sharing to web pages.
Can I change the position of the devices?
The composition is automatic: three devices use the classic overlapping layout, and one or two devices are centred and enlarged. Combine the device checkboxes with the "one image per device" option to get every variation you need.
Conclusion
A good mockup turns a plain link into something people want to click, share and buy. With the Website Device Mockup tool you no longer need a design application or a set of carefully measured screenshots: load the page, choose a background, capture, and the image is ready. Try it on your own site, on a template demo or on a client project, and keep the tool one click away by adding it to your website with the embed code above.