What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
If a gradient is visible in your browser but missing from an html2canvas image, the problem is usually an implementation gap between the browser’s CSS renderer and html2canvas’s DOM reconstruction. html2canvas lists linear-gradient() as supported, and its renderer contains linear- and radial-gradient code, but its FAQ warns that CSS support is incomplete. Treat the failure as a case-specific compatibility problem: verify the computed style, reduce the page to a minimal element, compare CSS variations, and report a minimal reproduction if the reduced case still fails.
Why the browser and html2canvas can disagree
html2canvas does not copy the browser’s pixels
A native screenshot records the final pixels already composited by the browser. html2canvas instead reads the DOM and CSS properties, then builds its own representation on a canvas. Every CSS property has to be implemented separately, so a declaration that paints correctly in Chrome, Firefox, or Safari can still be missing or different in the generated canvas.
The project’s feature reference lists linear-gradient() as supported. The current renderer source also contains paths for linear and radial gradients. That is evidence that gradients are implemented, not a guarantee that every syntax combination, browser, release, or layout will work. Your installed package may differ from the current source, and the FAQ explicitly describes CSS support as incomplete.
What a missing gradient usually means
- The declaration reaching html2canvas is not the declaration you inspected in a stylesheet. A custom property may be empty, overridden, or unresolved.
- The failing syntax is a combination that the installed release does not reproduce correctly, such as a particular angle, color-stop format, transparency value, or shorthand.
- A production layout adds interactions that are absent from a simple test: zero or changing dimensions, pseudo-elements, clipping, transforms, or several background layers.
- The page is using a different html2canvas version from the one whose source or documentation you consulted.
These are diagnostic possibilities, not a universal list of bugs. The reliable approach is to isolate the smallest declaration that changes the output.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall#1 Best Overall
First response: build a minimal reproduction
Before changing your application, make one element with explicit dimensions and one explicit gradient. Capture that element alone. This separates gradient parsing from unrelated layout, fonts, images, overlays, and application code.
- Give the test element a fixed width and height. Avoid
autosizing while diagnosing. - Put the gradient directly in
background-image; do not begin with a variable, shorthand, or multiple backgrounds. - Capture the element rather than the entire document.
- Save both the browser view and the generated image so you can compare the same case.
<div id="gradient-test"></div>
<script type="module">
import html2canvas from 'html2canvas';
const element = document.querySelector('#gradient-test');
html2canvas(element, { backgroundColor: null }).then(canvas => {
const link = document.createElement('a');
link.download = 'gradient-test.png';
link.href = canvas.toDataURL('image/png');
link.click();
});
</script>
<style>
#gradient-test {
width: 320px;
height: 180px;
background-image: linear-gradient(135deg, #145af2 0%, #a855f7 100%);
}
</style>If this element works, html2canvas can render at least that gradient in your current environment. Add your application’s rules back in small groups until the output changes. If this element fails, keep the reproduction and continue with the checks below.
Verify the computed CSS, not just the source stylesheet
Inspect the exact value html2canvas can read. DevTools’ “Styles” pane shows declarations that may be overridden; getComputedStyle() shows the final value after inheritance, custom-property substitution, and cascade resolution.
const element = document.querySelector('#gradient-test');
const style = getComputedStyle(element);
console.log({
backgroundImage: style.backgroundImage,
backgroundColor: style.backgroundColor,
width: style.width,
height: style.height,
opacity: style.opacity,
display: style.display,
visibility: style.visibility
});Check the following before changing the capture code:
backgroundImage: it should contain the expectedlinear-gradient(...)text, notnoneor an unresolvedvar(...).- Color stops: confirm that every color and stop is present, including alpha values such as
rgb()orrgba(). - Direction: record the exact keyword or angle. Keep this value in your reproduction.
- Dimensions: make sure computed width and height are non-zero at capture time.
- Visibility: an element with
display:none,visibility:hidden, or zero opacity can appear to be a gradient failure when it is actually not painted.
Also inspect pseudo-elements. A common design places the gradient on ::before or ::after while the visible element itself has no background. Include that rule in the reduced case, then test whether moving the same gradient temporarily onto the real element changes the result.
Rank #2
Test simple CSS before production CSS
Use a controlled progression rather than replacing random properties. The table shows useful variations and what each result tells you.
| Variation | If it works | If it fails |
|---|---|---|
One solid background-color |
The element is being painted and captured; investigate gradient parsing. | Check dimensions, visibility, clipping, and the element selected for capture. |
Two-color linear-gradient(to right, red, blue) |
The basic gradient path works; add complexity one feature at a time. | Keep the minimal case and record the installed version and browser. |
| Your original colors without variables | A custom property or cascade issue is likely. | Test direction, stop syntax, and alpha values separately. |
Your original angle replaced by to right |
The angle syntax is a useful suspect. | Look for another declaration or layout interaction. |
| Production layout restored | The added rule identifies the interaction; reduce it further. | The basic case and production case are equivalent, so preserve the reproduction for a report. |
Keep one change per capture. This is a diagnostic method, not a promise that a particular fallback fixes all gradient cases.
Investigate angle syntax carefully
A historical project issue describes a reporter whose gradient worked with a word direction but not with a degree angle, including a declaration using 0deg. That issue is old and cannot establish that current html2canvas releases always fail on degree angles. It is nevertheless a useful test branch when your declaration contains an angle.
/* Test A: word direction */
background-image: linear-gradient(to right, #145af2, #a855f7);
/* Test B: equivalent-looking angle */
background-image: linear-gradient(90deg, #145af2, #a855f7);
/* Test C: the exact production angle */
background-image: linear-gradient(0deg, #145af2, #a855f7);Capture each version with the same element size and html2canvas options. If only one form fails, include all three declarations and their outputs in your issue. Do not conclude that changing the angle is a permanent fix without checking the visual direction: CSS angles and keyword directions must produce the appearance your design requires.
Check version and browser boundaries
Record the exact html2canvas version installed by your project, the browser name and version, operating system, and whether the code runs from a bundled application or directly in a page. The current master source may contain fixes or behavior that is not present in your package. Conversely, a package update can change rendering behavior, so test the version you actually deploy.
Use the same minimal reproduction in a second supported browser only as a comparison, not as proof that one browser is universally broken. A difference helps narrow the report to an environment; it does not replace a reproducible test case.
Configuration options that help investigation
onError
The documented onError option reports resources that fail to load or render. Add it when your test also contains external images, fonts, or other resources. It can expose a separate loading problem, but the configuration documentation does not claim that onError repairs CSS gradient rendering.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorshtml2canvas(element, {
onError(error) {
console.error('html2canvas resource error:', error);
}
}).then(canvas => {
document.body.appendChild(canvas);
});data-html2canvas-ignore
Place data-html2canvas-ignore on an element you deliberately want excluded from the capture. It is useful for removing a toolbar, animation, or other distracting node while isolating the gradient. It does not force html2canvas to render the excluded element, and it cannot repair a gradient on an element you need in the image.
When the minimal case still fails
If a fixed-size element with a direct, simple gradient fails in your installed version, stop adding workarounds at random. Prepare a project issue with:
- the smallest HTML and CSS that still fails;
- the exact computed
background-imagevalue; - the gradient direction, color stops, transparency, and any custom properties;
- the html2canvas package version actually installed;
- browser and operating-system versions;
- the element’s computed width and height;
- the expected browser appearance and the actual canvas or image output;
- which variations worked, such as a solid color, a keyword direction, or a different angle.
The project FAQ recommends creating a test case for an unsupported or incomplete property. A concise reproduction gives maintainers something they can run and compare; a full application usually hides the relevant declaration.
Rank #4
Practical fallback options to test
The reviewed project material does not establish one guaranteed workaround for every gradient failure. Depending on your requirements, you can test an implementation option in your target browser:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →- Use a solid-color fallback before the gradient so a failed gradient still leaves a deliberate background.
- Render the visual as an image or SVG that your application controls, then test whether that asset captures correctly.
- Move a gradient from a pseudo-element to the captured element while diagnosing stacking and clipping.
- Use a native browser screenshot path when you need the browser’s final pixels rather than a DOM reconstruction.
Validate any option at the output sizes and browsers you support. These are alternatives to investigate, not fixes verified for every html2canvas release.
Or skip the browser setup
When the goal is a faithful website screenshot rather than a canvas reconstruction, ScreenshotNeo captures the rendered page through its screenshot API. It accepts and removes cookie-consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server also provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
One request returns a PNG, JPEG, WebP, or PDF. See the ScreenshotNeo documentation for all options, including viewport and device presets, full-page lazy-image loading, CSS-selector element capture, dark mode, retina scale, custom CSS and JavaScript, click and wait conditions, request blocking, headers and cookies, timezone and geolocation, transparent backgrounds, resizing, caching, signed links, asynchronous jobs, bulk capture, and the usage API.
cURL
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,
)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', data));ScreenshotNeo’s Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan, and yearly billing gives two months free. Create a free ScreenshotNeo account to try the capture without setting up a browser canvas.
FAQ
Does a black background prove that the gradient is unsupported?
No. It only shows that this capture did not reproduce the browser’s final pixels. Confirm the computed style, element dimensions, and a minimal direct gradient before attributing the result to a missing feature.
Should I switch to the project’s current source immediately?
Not without testing. Compare the behavior of the version your application installs with a newer release in a separate reproduction, then pin and document the version you choose for deployment.
Can data-html2canvas-ignore be used to make a gradient render?
No. That attribute excludes the marked element from the capture. It can simplify a diagnostic scene by removing unrelated nodes, but it cannot make the excluded gradient appear.
Frequently Asked Questions
Does a black background prove that the gradient is unsupported?
No. It only shows that this capture did not reproduce the browser’s final pixels. Confirm the computed style, element dimensions, and a minimal direct gradient before attributing the result to a missing feature.
Should I switch to the project’s current source immediately?
Not without testing. Compare the behavior of the version your application installs with a newer release in a separate reproduction, then pin and document the version you choose for deployment.
Can data-html2canvas-ignore be used to make a gradient render?
No. That attribute excludes the marked element from the capture. It can simplify a diagnostic scene by removing unrelated nodes, but it cannot make the excluded gradient appear.
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.
