Recommended Free Tools
Short answer: html2canvas does not take a pixel screenshot of Safari or another browser. It walks the DOM and paints its own canvas, so a filter, -webkit-filter or backdrop-filter effect can look correct in WebKit but be missing or different in the generated image. Browser support for the CSS property and html2canvas support for reproducing it are separate questions.
For an approximate DOM rendering, isolate the filter, verify the cloned document, and test with and without the effect. If the image must match the browser’s actual pixels, use a real-browser capture workflow instead. The diagnostic steps and working examples below show how to decide which path fits.
Why a WebKit filter can vanish in html2canvas
Safari’s CSS Visual Effects documentation uses -webkit-filter for effects such as hue-rotate(180deg) and saturate(200%). WebKit’s feature status also lists backdrop-filter and its -webkit-backdrop-filter alias as supported. Those statements describe what the browser engine can render; they do not promise that html2canvas can reproduce the result.
html2canvas reads the DOM, computed styles, images and layout, then implements a second renderer that paints onto a canvas. The project’s FAQ explains the limitation directly: “Every CSS property must be manually implemented to render correctly, so html2canvas will never have full CSS support.” A property may therefore be partly implemented, implemented with different compositing rules, or not implemented at all.
#1 Best Overall
filter versus backdrop-filter
filterchanges the rendered pixels of the element itself (for example, blurring an image or changing its hue).backdrop-filterchanges pixels behind a translucent element. It needs meaningful content behind that element in the captured scene.
Always record the exact declaration, browser and operating-system versions, html2canvas package version, and a small reproducible page. “WebKit supports this” is not enough evidence that a particular html2canvas build will render it.
Build a minimal reproduction first
Remove frameworks, animations and unrelated styles. Give the filtered element a visible background and, for a backdrop effect, put high-contrast content behind a translucent panel. This page lets you compare the live browser view with html2canvas output:
<!doctype html>
<meta charset='utf-8'>
<style>
body { margin: 0; font: 16px system-ui; background: #172033; }
.scene { position: relative; width: 720px; height: 420px; overflow: hidden;
background: linear-gradient(120deg, #ff6b6b, #4d7cff); }
.scene::before { content: ''; position: absolute; inset: 35px;
background: repeating-linear-gradient(45deg, #fff 0 12px, #111 12px 24px);
opacity: .7; }
.card { position: absolute; inset: 90px 120px; padding: 28px; color: white;
background: rgba(20, 25, 40, .35); border: 1px solid rgba(255,255,255,.5);
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%); }
.photo { width: 180px; height: 120px; object-fit: cover;
-webkit-filter: hue-rotate(180deg) saturate(200%);
filter: hue-rotate(180deg) saturate(200%); }
</style>
<div id='target' class='scene'>
<div class='card'>Backdrop panel</div>
<img class='photo' alt='Test image' src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="120"><rect width="180" height="120" fill="orange"/></svg>'>
</div>
<button id='capture'>Capture</button>
<script type='module'>
import html2canvas from 'html2canvas';
document.querySelector('#capture').onclick = async () => {
const canvas = await html2canvas(document.querySelector('#target'));
document.body.append(canvas);
};
</script>Use the same browser for the live view and the test capture. If the live page is correct but the canvas is not, you have isolated a renderer-coverage problem rather than a WebKit syntax problem.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
A controlled diagnosis workflow
- Confirm the capture boundary. Make sure the target element is actually inside the DOM node passed to
html2canvas(). Include the background content that a backdrop filter is supposed to affect. - Capture a baseline. Temporarily remove both prefixed and unprefixed filter declarations. If the unfiltered element is also missing, investigate layout, visibility, fonts or images before blaming the filter.
- Test one declaration at a time. Compare
filter: blur(8px), a color function, and the exact WebKit-prefixed rule separately. Do not infer support for an entire combination from one successful function. - Check the cloned document. html2canvas exposes
onclone, which runs after it clones the page and before it paints. Log or alter the clone to see what the renderer receives:
const source = document.querySelector('#target');
const canvas = await html2canvas(source, {
onclone: (clonedDocument) => {
const clone = clonedDocument.querySelector('#target');
console.log('clone:', clone, getComputedStyle(clone));
// Controlled experiment: replace a difficult effect with a static one.
// clone.querySelector('.card').style.backdropFilter = 'none';
// clone.querySelector('.card').style.webkitBackdropFilter = 'none';
}
});- Try a static equivalent. Replace a blur with a pre-blurred image, a baked gradient, or an opaque color in the clone. If the static version captures correctly, the missing piece is filter rendering, not element discovery.
- Record versions and file a focused case. Include the browser/OS, html2canvas version, exact CSS, a minimal HTML file, and live-versus-canvas screenshots. The html2canvas FAQ asks users to create a test case and open an issue when a property is missing or incomplete.
What foreignObjectRendering can and cannot do
The configuration reference exposes foreignObjectRendering. It is worth testing in your target browser, but treat it as an experiment rather than a guarantee of filter fidelity. It changes how HTML is embedded for rendering; it does not turn html2canvas into a native screenshot API, and browser support for foreign SVG/HTML rendering varies.
const canvas = await html2canvas(document.querySelector('#target'), {
foreignObjectRendering: true,
onclone: (doc) => {
// Keep this clone unchanged for an apples-to-apples test.
console.log(doc.querySelector('#target'));
}
});Run the same page with the option set to false (the default) and compare dimensions, text, images and filter output. Keep the setting only if it improves your actual browser/version combination.
Cross-origin content is a separate failure mode
useCORS or a proxy can help html2canvas load eligible cross-origin images, but neither option implements a missing CSS filter. The image server must send an appropriate CORS header, and the canvas must remain origin-clean. Content-security rules still apply.
Rank #3
- Cross-origin iframes are inaccessible to html2canvas.
- Same-origin iframe contents can be rendered recursively when they are inside the captured document.
- Images or canvases drawn from an origin that does not grant access may be omitted or taint the canvas.
- A backdrop effect cannot blur content that is outside the capture boundary, hidden, or unavailable because of an iframe or CORS restriction.
Test with local or same-origin assets first. Then add remote images one at a time so an origin problem does not get mistaken for filter support.
Choose a capture method based on the required pixels
If the deliverable must match what a user sees, use a workflow that drives a real browser. html2canvas is client-side and reconstructs a DOM image; it is useful when an approximation is acceptable or when you need a quick in-page export.
Free tools Windows power users keep installed
One-click scans. No signup required.
| Method | Pixel goal | Where it runs | Cross-origin and filter considerations | Best fit |
|---|---|---|---|---|
| ScreenshotNeo (try first) | Browser-rendered website capture | Remote API or MCP server | Captures the page rather than rebuilding it; clean-up and verdict headers help identify failed loads | Automated URLs, CI, AI agents and production services |
| html2canvas | DOM reconstruction; may approximate | Client-side JavaScript | CSS coverage is manual; cross-origin images and iframes remain constrained | In-page export when exact browser pixels are not required |
| Browser extension screenshot API | Actual browser pixels | User’s browser | Uses the extension’s browser permissions and capture model | Interactive, user-triggered screenshots |
| Puppeteer or Playwright | Actual browser pixels | Server-side automation | Useful for controlled pages; you must manage browser versions, navigation, authentication and network policy | Server jobs where you control the browser runtime |
The html2canvas FAQ names native extension capture for faithful browser output and Puppeteer or Playwright for server-side screenshots. Select the option according to whether you need a client-side export, a repeatable browser job, or a hosted endpoint.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. One request returns a PNG, JPEG, WebP or PDF. Before capture it accepts cookie/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 result with X-Page-Verdict and X-Billed headers. Its MCP tools—take_screenshot, get_page_info and capture_pdf—work with Claude, Cursor and other MCP clients.
See the ScreenshotNeo documentation for request options and authentication. This cURL call captures a page through a real browser service:
curl -G 'https://api.screenshotneo.com/v1/shot' -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe equivalent Python request is:
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)And in 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}`);You can also select an element, load lazy images for full-page captures, set dark mode, choose any viewport or one of 12 device presets, use retina scale, inject CSS or JavaScript, click before capture, hide selectors, wait for a selector, delay or network idle, block ads/trackers/requests/resource types, provide headers/cookies/user agent/Authorization, set timezone or geolocation, make transparent images, resize output, cache with a chosen TTL, create signed public image links, submit asynchronous jobs with signed webhooks, capture up to 100 URLs per bulk call, and query usage. PDF output supports paper size, margins, landscape mode and page ranges. Every feature is included on every plan, and parameter names used by other screenshot APIs are accepted to ease migration.
Pricing is $0 for 1,000 shots per month with no card, then $5 for 3,000 (Starter), $15 for 15,000 (Growth), $39 for 60,000 (Pro), $99 for 250,000 (Scale), or $249 for 1,000,000 (Business). Yearly billing gives two months free. Create a free ScreenshotNeo account to start with the 1,000-shot allowance.
Troubleshooting checklist
| Symptom | Likely cause | Fix |
|---|---|---|
| Live Safari view is filtered; canvas is not | html2canvas lacks or differs in filter implementation | Run the minimal case, test one function, inspect onclone, then use a real-browser capture if pixels must match. |
backdrop-filter appears to do nothing |
No visible content exists behind the translucent element | Add a contrasting background inside the capture boundary and verify the panel has transparency. |
| Images disappear or the canvas is tainted | Cross-origin response lacks usable CORS headers | Serve the asset same-origin or configure a permitted CORS response; do not expect useCORS to fix CSS support. |
| Only an iframe’s outer box appears | The iframe is cross-origin | Capture the framed page separately or use a browser automation workflow with access to that page. |
Changing foreignObjectRendering changes layout but not the filter |
The browser’s foreign-object path still does not reproduce the effect | Keep the more stable setting and switch to native browser capture for fidelity. |
| Capture is blank or incomplete | Target is outside the cloned DOM, still loading, hidden, or blocked by security policy | Wait for content, verify the selector and visibility, capture a smaller node, and check console/security errors. |
Performance and reliability considerations
html2canvas work scales with the DOM, styles and images it must reconstruct. Capture the smallest useful element, avoid running multiple captures simultaneously, and wait until fonts, images and layout have settled. A diagnostic clone should not mutate the live page; put temporary overrides in onclone.
For repeatable server jobs, pin the browser and automation versions, set explicit navigation and resource timeouts, and log the target URL plus the verdict. For any method, test pages containing consent dialogs, lazy images, authenticated content, cross-origin assets and iframes—the cases most likely to change the result.
Frequently Asked Questions
Does using the -webkit- prefix make html2canvas support the filter?
No. The prefix affects CSS parsing and WebKit behavior. html2canvas still needs its own implementation of the property and compositing.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Can I prove a filter bug with one screenshot?
Use a minimal page and provide the live render, canvas render, exact CSS, browser/OS and html2canvas version. A single complex application page cannot isolate the cause.
Should I remove -webkit-filter from production CSS?
Not solely because html2canvas misses it. Keep the declarations required by your supported browsers, and choose a native screenshot path when exports must match them.
Will a proxy make a backdrop blur work?
A proxy can address eligible resource loading. It cannot add missing filter rendering, expose a cross-origin iframe, or bypass content-security rules.
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.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →
