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
Enter a URL and pick a size
Choose one of four viewports, and either the visible screen or the full page.


- 2
A page URL in place
Desktop at 1440 by 900 and Above fold are selected by default. Press Capture.


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


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.
Paste the URL you want to capture
Enter any public URL. The tool fetches and renders the page in a headless Chromium browser.
Pick viewport and capture mode
Choose the desktop, laptop, tablet, or mobile preset, and full-page or above-fold capture.
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.
Download the image
Press Download to save the PNG. The image comes straight to your browser and is not hosted at a shareable URL.
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)
- Install: npm install puppeteer.
- Launch browser: const browser = await puppeteer.launch(); const page = await browser.newPage().
- Navigate and capture: await page.goto("https://example.com"); await page.screenshot({ path: "shot.png", fullPage: true });.
- Close browser: await browser.close(). Wrap in try/finally for resource cleanup.
Playwright (cross-browser)
- Install: npm install playwright.
- Launch any browser: const browser = await chromium.launch(); (or webkit, firefox).
- Capture with page.screenshot({ path, fullPage: true }). Same API as Puppeteer.
- Use page.setViewportSize() for mobile/desktop variants. Built-in retry logic via test runner.
Urlbox API
- Sign up at urlbox.com and grab your API key.
- Make a GET request: https://api.urlbox.com/v1/{API_KEY}/png?url=https://example.com&full_page=true.
- Pass options as query parameters: width, height, delay, full_page, retina.
- Returns the image directly. Urlbox caches each render for 30 days by default (the ttl option).
Bannerbear API
- Sign up at bannerbear.com and copy your API key.
- 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.
- The API answers 202 Accepted and queues the screenshot. Bannerbear focuses on template-based image generation; screenshots are one feature.
- 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)
- Install: npm install @vercel/og.
- Create an Edge function or Next.js API route that returns ImageResponse with custom JSX.
- @vercel/og turns the JSX into a PNG with Satori and Resvg.
- 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.
| Capability | Grigora | Urlbox | ScreenshotAPI | Manual capture |
|---|---|---|---|---|
| Full-page screenshots | Yes | Yes | Yes | Manual |
| Mobile vs desktop viewport | Yes | Yes | Yes | Manual |
| JS-rendered page support | Yes | Yes | Yes | Manual |
| Custom CSS injection | No | Paid | Yes | No |
| Cookie consent handling | No | Paid | Yes | Manual |
| Free with no signup | Yes | Trial only | 100 free, signup | Yes |
| Retina / high-DPI capture | Mobile and tablet (2x) | Yes | Yes | Manual |
| Bulk URL screenshots | No | Paid | Yes | No |
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.
Frequently asked questions
Twelve answers.
Related free tools
Other utilities.
Meta Tag Generator
Generate page meta tags.
Try itMeta Description Generator
AI-write descriptions.
Try itSERP Snippet Preview
Visualize SERP rendering.
Try itOpen Graph Checker
Audit OG tags.
Try itMeta Title Checker
Audit page title.
Try itLink Metadata Scraper
Pull all metadata from URL.
Try itWebsite Font Detector
Find the fonts any page uses.
Try it