Recommended Free Tools
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
CSS gradients are not universally unsupported in html2canvas: the project lists linear-gradient() as supported, and its renderer has code for linear and radial gradients. When a gradient disappears, compare the browser’s computed style with a minimal html2canvas capture, then add the production styles back in stages. If the small case still fails, report that reproducible case to the project; the available documentation does not establish a single workaround that fixes every gradient issue.
Why a gradient can appear in the browser but not the capture
html2canvas does not take a native screenshot of the browser’s final pixels. It builds a representation of the page from the DOM and CSS properties it reads. That means a browser can render a style successfully while html2canvas renders it differently or misses it.
The project’s feature reference lists linear-gradient() as supported, and its renderer contains handling for linear and radial gradients. But its FAQ cautions that CSS support is incomplete because properties must be implemented individually. Treat a missing gradient as a case-specific support or implementation issue—not proof that gradients never work.
Also distinguish the source you are checking: the renderer on the project’s current master branch may not match the html2canvas package installed in your application. Record the installed version before drawing conclusions from current source code.
#1 Best Overall
Start with the exact computed gradient
First confirm that the affected element has the gradient you expect at the time the capture runs. Inspect the element in the browser’s developer tools, or run this in the console after selecting the element in the Elements panel:
const el = $0;
const style = getComputedStyle(el);
console.log({
backgroundImage: style.backgroundImage,
width: el.getBoundingClientRect().width,
height: el.getBoundingClientRect().height
});$0 is the currently selected element in Chromium-based browser developer tools. In another browser or from application code, replace it with a reference to the target element. Save the printed backgroundImage value; it shows the computed declaration rather than merely the rule you intended to apply.
- Check that
backgroundImageis notnoneand includes the expected gradient function. - Record the direction, color stops, transparency, and any CSS custom properties used to form the declaration.
- Check the measured width and height. A zero-sized element cannot provide the expected visible area in the capture.
- Run the inspection when the element is in the same state and timing as the capture, especially if scripts or state changes affect its styling.
Build a minimal reproduction
Reduce the problem to one element with explicit dimensions and a simple gradient. Capture that element, then compare the browser rendering with the html2canvas output. This separates a basic gradient-rendering problem from interactions with the rest of the page.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated 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 matchRank #2
<div id="gradient-test"></div>
<script>
const target = document.getElementById('gradient-test');
html2canvas(target).then(canvas => {
document.body.appendChild(canvas);
}).catch(error => {
console.error('html2canvas capture failed:', error);
});
</script>For this test, give #gradient-test an explicit width and height and a simple background-image: linear-gradient(...) in your stylesheet. Load html2canvas in the page as your application already does; this snippet assumes its html2canvas function is available. Do not start by copying the entire production component: the point is to test the smallest element and style that can show the issue.
- Look at the element in the live page and confirm the gradient is visible.
- Capture the element and inspect the resulting canvas. Note whether the gradient is absent, replaced, partly rendered, or accompanied by another failure.
- Keep the exact CSS and computed value alongside the result. A concise reproduction is more useful than a description such as “the gradient is broken.”
- Record the html2canvas version actually installed and the browser used for the reproduction.
If the small test works, isolate the production difference
Keep the working minimal case as a control. Add the production details back in small groups, capturing after each change. This is a diagnostic method, not a guaranteed fix; it helps identify which combination changes the output.
- Add the real gradient declaration, including its direction, stops, alpha values, and custom properties.
- Restore the production element’s other styles and dimensions.
- Restore nearby layout and surrounding elements if they are part of the captured target.
- Compare computed styles and capture output at each stage so the first failing change is identifiable.
If your declaration uses an angle, test a word direction and an angle as separate variants in the minimal case. A historical project issue reported one reporter’s gradient working with a word direction but not with a degree angle. That old report is a useful test idea, not evidence that current html2canvas releases always fail on degree angles.
Check the installed release, not only current source
Write down the html2canvas version resolved by your project’s dependency setup and the browser and version used for the test. The project’s current renderer source contains gradient code, but that alone cannot establish what an older installed package does or whether a particular CSS combination is handled in your environment.
For a report or an internal reproduction, keep these details together:
- Minimal HTML and CSS, including the exact computed gradient declaration.
- html2canvas package version and target browser.
- Element dimensions and any relevant CSS custom-property values.
- Expected browser appearance and actual generated canvas appearance.
- Whether a simple test succeeds and which added style or layout change first makes it fail.
Use configuration options for their documented purposes
The configuration documentation describes onError for resources that fail to load or render, and data-html2canvas-ignore for excluding elements from capture. These can help investigate resource failures or omit unwanted elements, but the documentation does not say they repair gradient rendering. Do not treat a missing gradient as a reason to add either option unless it addresses a separate issue in your capture.
Rank #4
When and how to report the bug
If the minimal reproduction still fails, follow the project FAQ’s recommendation to create a test case and open an issue for a missing or incomplete property. Make the report reproducible without access to your full application.
- Reduce the page to the smallest element and stylesheet that still show the failure.
- Include the exact CSS declaration and computed
background-image, including values supplied by custom properties. - State the installed html2canvas version, browser, and element dimensions.
- Show the expected browser appearance and the actual capture result, and say whether the minimal case behaves differently from the production element.
- If relevant, include separate word-direction and degree-angle results, making clear that these are observations from your reproduction.
The project FAQ explains the browser/capture gap plainly: “Every CSS property must be manually implemented to render correctly, so html2canvas will never have full CSS support.” That is why a test case, rather than the fact that the browser displays the gradient, is the useful evidence for an issue report.
Or skip the browser setup
If you need a browser-rendered image of a page rather than an html2canvas canvas inside your app, ScreenshotNeo offers a screenshot API. This is an alternative capture path, not a fix for html2canvas or a way to return its canvas. A one-call request looks like this; replace the example page URL with the page you want to capture. See the ScreenshotNeo API documentation for request details.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp- Before capture, it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. Responses identify the page verdict and billing status in
X-Page-VerdictandX-Billedheaders. - An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for AI agents and MCP clients. - The free plan includes 1,000 screenshots a month with no card. Paid plans start at $5 for 3,000 screenshots.
Sign up for 1,000 free screenshots a month—no card required.
Frequently Asked Questions
Does html2canvas support linear gradients?
The project’s feature reference lists linear gradients as supported, but its FAQ says CSS support is incomplete. Whether a particular declaration renders correctly depends on the case and installed release.
Will changing a degree angle to a word direction always fix a missing gradient?
No. One historical issue reported that behavior for a particular case; it does not establish a universal fix or current-release limitation.
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 →Can ScreenshotNeo fix a gradient missing from html2canvas?
No. It is a separate screenshot API that captures a webpage; it does not repair html2canvas or produce its in-page canvas.
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.
