For a flat mockup, set the exact viewport your design will use, then capture either the visible viewport, a selected element, or the complete page and save it as a PNG. Chrome and Firefox can capture full pages without manual scrolling; Windows Snipping Tool handles quick regions or windows; and Figma’s Chrome extension can turn a webpage into editable layers when a flat image is not enough.
Choose the right capture for your mockup
Decide what the mockup must show before opening a capture tool. The choice affects dimensions, editing options and the amount of cleanup afterward.
| Mockup need | Capture type | Best result |
|---|---|---|
| Hero section, above-the-fold concept or device frame | Viewport | A consistent image at the target screen width and height |
| Card, button, menu or other component | Element or region | A tightly cropped asset without unrelated page content |
| Complete landing page or long-form layout | Full page | One tall image containing content below the fold |
| Designers need to change text, images or shapes | Webpage-to-design conversion | Editable Figma layers rather than one raster bitmap |
Use PNG when text and interface edges must stay sharp. JPEG is smaller for photographic pages but can add compression artifacts around small type. If the image will be placed inside a phone or browser frame, capture the page at the frame’s content dimensions and crop away browser chrome unless the concept intentionally includes it.
Set the viewport before you capture
A mockup is only convincing when the screenshot matches the intended device frame. In Chrome DevTools, open the device toolbar and enter exact width and height values or select a preset. The Device Mode documentation lists example widths of 320 px, 375 px, 425 px, 768 px, 1024 px, 1440 px and 2560 px. Set the device-pixel ratio (DPR) when your design file expects a retina asset, and keep the same width, height and DPR for every variant.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
Device Mode is a simulation, not a replacement for testing on a physical phone. Chrome describes it as a first-order approximation of a real mobile experience, so validate touch behavior, font rendering and critical presentations on the actual device before approving a final presentation. See the Chrome Device Mode documentation for the current controls.
Capture a viewport or full page in Chrome
- Open the page you want to mock up in Chrome.
- Open DevTools with F12 or Ctrl+Shift+I (Windows/Linux), or Command+Option+I (macOS).
- Turn on the device toolbar with Ctrl+Shift+M (Windows/Linux) or Command+Shift+M (macOS). Choose a device preset or type the required width and height.
- Allow the page to finish loading. Trigger the state you need, such as an expanded menu, selected tab or hover style, before capturing.
- In DevTools, open the More options menu (the three-dot button), choose Capture screenshot for only the visible viewport, or choose Capture a full size screenshot for content beyond the viewport. Chrome documents the full-size command as capturing the whole page, including content that is not currently visible.
- Rename the downloaded PNG with the URL, viewport and revision, for example
pricing-1440x900-v3.png.
For a page with lazy-loaded images, scroll through it once before a full-page capture so content has a chance to load. If the page changes while you scroll, wait for animations and network activity to settle, then capture again.
Capture in Firefox
Firefox’s built-in tool is useful when you need a region, a detected element, the visible portion or the complete page.
- Open the page and right-click it, then choose Take Screenshot. You can also press Ctrl+Shift+S on Windows/Linux or Command+Shift+S on macOS.
- Choose a detected element, drag a region, select Save full page, or choose Save visible.
- Download the image or copy it to the clipboard, then place it in your mockup file.
For repeatable captures, open Firefox Developer Tools and use the :screenshot command. Examples:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
:screenshot --fullpage --filename=landing-page.png
:screenshot --selector="#pricing-card" --filename=pricing-card.png
:screenshot --dpr=2 --delay=1000 --filename=mobile-retina.png
:screenshot --clipboard--fullpage includes content outside the window, --selector captures one matching element, --dpr controls pixel density, --delay waits before capture, --clipboard copies the result, and --filename sets the output name. The Firefox Developer Tools command-line documentation describes the available syntax.
Use Snipping Tool for a quick Windows mockup
When you need a visible region rather than a browser-rendered full page, press Windows+Shift+S to open Snipping Tool. Select Rectangle, Window, Freeform or Full screen, then annotate or crop and save the result. A window snip can include the browser frame; a rectangle snip lets you exclude it. Microsoft documents these capture modes and the shortcut in its Snipping Tool support guide.
Rank #3
- 31+ Categories in One Book – Includes hoodies, jeans, cargos, hats, jackets, accessories, and more — everything you need to design full collections in one place.
- Made for Fashion Designers – Built specifically for clothing brand owners, creatives, and aspiring designers to sketch million-dollar ideas.
- Save Time & Stay Organized – Instead of flipping between different sketchbooks, all essential templates are combined into one master book.
- Professional Mockups Included – Each section comes with clean mockups, so your sketches look polished and presentation-ready.
- Better than Digital – No complicated software, no wasted time. Instantly capture ideas anywhere, without distractions.
Snipping Tool is best for a quick visual reference. It does not provide a reliable full-page capture of content below the current window, so use Chrome or Firefox for a complete landing page.
Make the screenshot editable in Figma
A normal screenshot is a flat raster image: you can crop and mask it, but you cannot directly edit its text or individual interface shapes. When the mockup requires editable content, install the Figma Chrome extension and capture the element or full page. Figma says the extension can capture webpages, including scrolled-out content, and convert them into editable frames, text, images and shapes. Paste the result into a Figma file, then check the imported fonts, line breaks and image crops before presenting it. The extension’s documented workflow is described by Figma’s Chrome extension guide.
Prepare the image for a believable mockup
Match the frame, not just the browser window
Use the inner content area of the target device or browser frame as your capture width. A 375-pixel mobile frame needs a 375-pixel CSS viewport, while a desktop frame may need 1440 pixels or another exact design specification. Do not resize a 1440-pixel capture into a 375-pixel layout if responsive typography and wrapping matter; capture the mobile viewport directly.
Remove accidental interface chrome
Crop browser tabs, the address bar, bookmarks and operating-system borders unless they are part of the concept. For a device mockup, leave enough of the webpage around the edges to avoid cutting shadows or sticky navigation.
Control dynamic content
Dismiss cookie notices, newsletter prompts and chat bubbles before capture when they are not part of the design. Disable extensions that inject banners, and use a private window if an extension changes the page. Pause carousels or animations at a useful frame; otherwise two captures of the same URL may differ.
Keep pixel dimensions sufficient
Export at least the pixel dimensions at which the image will appear. For a retina presentation, capture at a higher DPR and scale down in the design file rather than enlarging a small screenshot. Check fine text at 100% zoom after export.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. One request can return a PNG, JPEG, WebP or PDF, with options for full-page capture, a CSS selector, device presets or a custom viewport, retina scale, dark mode, custom CSS and JavaScript, click actions, selector hiding, waits for a selector, delay or network idle, blocked ads and trackers, headers, cookies, user agents, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous jobs with signed webhooks and bulk capture of up to 100 URLs per call. Its parameter names also support the names used by other screenshot APIs, which can simplify migration.
Before the capture, it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers.
Use the API documentation at screenshotneo.com/docs/ for all parameters. This one-call example captures Stripe as a WebP file:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo is useful when you need repeatable mockup assets without maintaining a browser runner: cookie banners, popups and chat widgets are removed before the shot; bot checks, blank pages and failed loads are never billed; an MCP server lets AI agents take screenshots; 1,000 screenshots per month are free with no card, and paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.
Free tools Windows power users keep installed
One-click scans. No signup required.
Advanced capture decisions
Viewport versus full page
A viewport image fits a hero or device frame and preserves the layout users see immediately. A full-page image documents the entire page but may be extremely tall and may expose sticky headers repeatedly or capture sections that load only after scrolling. Use full page only when the mockup needs that complete context.
Element versus region
An element capture follows the element’s CSS box and is repeatable when the page structure is stable. A manually drawn region is faster for a one-off composition but can include inconsistent padding. Prefer a selector in Firefox or an element-capable API for a series of component mockups.
Static image versus PDF
Use PNG, JPEG or WebP for a visual mockup. Use PDF when the deliverable is a paginated document and you need paper size, margins, landscape orientation or page ranges; a PDF is not a substitute for a device-frame image.
Troubleshooting capture problems
- Full-page output is cut off: confirm you selected Chrome’s Capture a full size screenshot or Firefox’s Save full page, not a visible-viewport command. For long pages, wait for lazy content and try again.
- Images are blank: scroll through the page first, disable a blocking extension, or increase the capture delay. A page that requires interaction may need a click or a wait for a specific selector.
- The mobile layout is wrong: set the viewport before loading the page, verify the width is in CSS pixels, and check that the site’s responsive breakpoint is actually reached. Device emulation remains an approximation.
- Cookie or chat overlays cover the design: dismiss them before a local capture, use a clean private profile, or configure ScreenshotNeo’s consent and widget cleanup.
- Fonts reflow between captures: wait for web fonts and network activity to finish, use the same browser and DPR, and avoid capturing while animations are running.
- Firefox selector capture fails: quote the selector correctly, confirm it matches one visible element, and remove transient classes. Try a region capture if the element is inside a cross-origin frame.
- The screenshot is blurry: capture at the final display size or a higher DPR, then scale down. Do not enlarge a low-resolution snip.
- A hosted capture returns a bot check or blank page: check the target URL and authentication requirements. With ScreenshotNeo, inspect
X-Page-VerdictandX-Billed; failed loads and bot checks are not billed.
Repeatable workflow for teams
- Record the URL, viewport width and height, DPR, color scheme and capture date.
- Use a stable test account or a URL state that does not change between runs.
- Choose one naming convention, such as
site-section-width-height-dpr-revision.png. - Capture a baseline, compare later versions at the same dimensions and keep the source URL beside the asset.
- Review privacy before sharing: remove personal data, account details, tokens and internal URLs from the page or crop.
Frequently asked questions
Can I capture a website without manually scrolling?
Yes. Chrome’s Capture a full size screenshot and Firefox’s Save full page render content beyond the current viewport into one image.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteWhat is the easiest way to capture only one card?
Use Firefox’s detected-element screenshot or its :screenshot --selector command. A region snip works for a one-off, while a selector is more repeatable.
How do I make a website screenshot editable?
Use the Figma Chrome extension’s webpage capture, which converts supported page content into editable design layers. A conventional PNG remains a flat image.
Should I use a simulated phone preset for final approval?
Use it to create a consistent mockup, then validate critical layout and interaction on the real device because browser emulation is only an approximation.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
