Skip to main content

Website Screenshot Generator

A webpage on desktop, laptop, tablet or mobile.

How to use the Website Screenshot Generator, step by step

Real screenshots of the current tool, using sample inputs. Long results are shown as a preview.

  1. 1

    Enter a URL and pick a size

    Choose one of four viewports, and either the visible screen or the full page.

    Website Screenshot Generator in its default state before the walkthrough
  2. 2

    A page URL in place

    Desktop at 1440 by 900 and Above fold are selected by default. Press Capture.

    Website Screenshot Generator with sample input or settings in place
  3. 3

    Review the result

    Select Capture to run the tool. This screenshot shows the result returned for the sample input.

    Website Screenshot Generator showing its actual result with sample inputs

What this tool does

Website Screenshot Generator captures public webpages as above-fold or full-page screenshots across desktop, laptop, tablet, and mobile viewports.

Designed to fit into your existing SEO and content workflow with no setup overhead.

How to use it

Five steps.

1

Paste the URL you want to capture

Enter any public URL. The tool fetches and renders the page in a headless Chromium browser.

2

Pick viewport and capture mode

Choose the desktop, laptop, tablet, or mobile preset, and full-page or above-fold capture.

3

Wait for JS-rendered content to load

The browser runs the page scripts and waits for network activity to settle. Full-page mode also scrolls the page so lazy images load.

4

Download the image

Press Download to save the PNG. The image comes straight to your browser and is not hosted at a shareable URL.

5

Use for design audits or social shares

Compare versions, archive snapshots, or use as social media thumbnails. Mobile and tablet captures render at 2x pixel density.

When teams use it

Six common workflows.

Design and UX audits

Capture full-page screenshots of all key pages on a site or competitor sites for visual review and side-by-side comparison.

Marketing and social share thumbnails

Generate consistent thumbnails of landing pages for case studies, social posts, and email campaigns without manual cropping.

Portfolio and client reviews

Capture a finished site at desktop and mobile sizes to show in a portfolio or send to a client for review.

Archival and historical record

Capture pages before and after a redesign or content update to keep a visual record of what changed.

Cross-device visual checks

Capture the same page at desktop, laptop, tablet, and mobile sizes to catch layout breaks. Every capture renders in Chrome, so check Safari and Firefox in those browsers.

Bug reporting and QA

Attach a screenshot to a bug report so engineers see exactly how the page rendered at a given screen size.

Platform guides

Other ways to capture pages in code.

Puppeteer (Node.js)

  1. Install: npm install puppeteer.
  2. Launch browser: const browser = await puppeteer.launch(); const page = await browser.newPage().
  3. Navigate and capture: await page.goto("https://example.com"); await page.screenshot({ path: "shot.png", fullPage: true });.
  4. Close browser: await browser.close(). Wrap in try/finally for resource cleanup.

Playwright (cross-browser)

  1. Install: npm install playwright.
  2. Launch any browser: const browser = await chromium.launch(); (or webkit, firefox).
  3. Capture with page.screenshot({ path, fullPage: true }). Same API as Puppeteer.
  4. Use page.setViewportSize() for mobile/desktop variants. Built-in retry logic via test runner.

Urlbox API

  1. Sign up at urlbox.com and grab your API key.
  2. Make a GET request: https://api.urlbox.com/v1/{API_KEY}/png?url=https://example.com&full_page=true.
  3. Pass options as query parameters: width, height, delay, full_page, retina.
  4. Returns the image directly. Urlbox caches each render for 30 days by default (the ttl option).

Bannerbear API

  1. Sign up at bannerbear.com and copy your API key.
  2. Send POST /v2/screenshots with a JSON body such as { url, width, mobile } and the header Authorization: Bearer API_KEY. Leave height out to capture the full page.
  3. The API answers 202 Accepted and queues the screenshot. Bannerbear focuses on template-based image generation; screenshots are one feature.
  4. Poll GET /v2/screenshots/:uid, or pass a webhook_url, until status is completed, then read screenshot_image_url.

Vercel @vercel/og (for OG images)

  1. Install: npm install @vercel/og.
  2. Create an Edge function or Next.js API route that returns ImageResponse with custom JSX.
  3. @vercel/og turns the JSX into a PNG with Satori and Resvg.
  4. Reference the URL as your og:image meta tag for dynamic per-page OG images.

Website Screenshot Generator vs. alternatives

Side-by-side with common screenshot tools.

CapabilityGrigoraUrlboxScreenshotAPIManual capture
Full-page screenshotsYesYesYesManual
Mobile vs desktop viewportYesYesYesManual
JS-rendered page supportYesYesYesManual
Custom CSS injectionNoPaidYesNo
Cookie consent handlingNoPaidYesManual
Free with no signupYesTrial only100 free, signupYes
Retina / high-DPI captureMobile and tablet (2x)YesYesManual
Bulk URL screenshotsNoPaidYesNo

Common errors and fixes

Eight common capture problems.

Screenshot returns blank or skeleton-only image

Cause: Page uses client-side JS rendering and capture happened before scripts completed.

Fix: Increase wait time to 5-10 seconds or use waitUntil: "networkidle". Test with longer delays for SPA frameworks.

Lazy-loaded images missing from full-page capture

Cause: Images use Intersection Observer to load as user scrolls; headless browser does not scroll automatically.

Fix: Scroll the page from top to bottom before capture. This tool already does that in full-page mode before it takes the image.

Cookie banner overlays the content

Cause: GDPR consent banner displays on first visit and blocks the page.

Fix: Inject CSS to hide banner selectors, or click the Accept button programmatically before capture.

Screenshot shows old cached content

Cause: Browser or CDN cache returned stale version after recent site update.

Fix: Pass cache-busting query parameter (?nocache=timestamp). Urlbox has a force option that skips its own render cache.

Resolution looks blurry on retina displays

Cause: Default deviceScaleFactor of 1 produces low-DPI image; retina screens expect 2x or 3x density.

Fix: Set deviceScaleFactor: 2 in screenshot config. The image has four times the pixels, so the file is larger, but text stays sharp. This tool captures the mobile and tablet presets at 2x.

Capture fails on URL with HTTP basic auth

Cause: Browser does not have credentials and stops at the auth prompt.

Fix: In your own Puppeteer script, call page.authenticate({ username, password }) before page.goto. This tool does not accept URLs with a username or password in them.

Page loads in development but fails in capture

Cause: Headless browser blocked by anti-bot protections (Cloudflare, hCaptcha) or site detects user-agent.

Fix: Set custom user-agent matching real Chrome. For aggressive anti-bot sites, use a residential proxy or whitelist headless.

Full-page screenshot truncated at fixed height

Cause: This tool stops full-page captures at 20,000px of page height (about 12,000px on the 2x tablet preset) to keep memory use and file size in check.

Fix: In your own script, scroll with window.scrollTo, capture each section, then stitch the images. This tool shows a note under the preview when it cuts a capture short.

What one capture covers

The limits this tool works within.

1x
Pixel density of the Desktop (1440 x 900) and Laptop (1366 x 768) presets
2x
Pixel density of the Tablet (820 x 1180) and Mobile (390 x 844) presets
20,000
Tallest full-page capture, in pixels of page height (about 12,000 on tablet)
20s
Time a page gets to load before the capture fails

Frequently asked questions

Twelve answers.

Above-fold mode captures the first screen only. Full-page mode scrolls and captures the whole page, up to a height limit.
Yes. The tool waits for modern pages to load before taking the screenshot.
Yes. Pick desktop, laptop, tablet, or mobile before generating the image.
Use full-page mode for audits, landing pages, content reviews, and competitor snapshots.
Use above-fold mode when you only need the first visible screen, such as a hero section or quick preview.
A PNG image. You can preview it on the page and save it with the Download button.
No. It opens pages as a logged-out visitor and only accepts public URLs, not local or private network addresses.
The tool captures the page as a new visitor, so cookie banners can appear if the site shows one.
The page may block automated browsers, load too slowly, or require authentication.
Yes. Screenshots help document page layout, messaging, CTAs, and mobile experience.
Yes. Use the above-fold capture for quick thumbnail-style previews.
Yes. You can generate website screenshots without signing up.

Related free tools

Other utilities.

Try Website Screenshot Generator now

Free, unlimited, no signup.

Try the Tool