Build or buy
html2canvas is a free library that redraws part of a page onto a canvas in the visitor's browser. HTML/CSS to Image renders on a server, so every visitor gets the same image, with hosting and the CSS html2canvas can't draw.
50 free images each month · No credit card required
Trusted by teams at:
Both turn HTML and CSS into a PNG from code. If you're building a "download as image" button or a share card from part of a page, either one can produce it.
It runs in the visitor's browser, without a rendering server or API key, and it's free under the MIT license. For a "save this chart as an image" button on a page you control, that's hard to beat.
html2canvas reads the DOM and redraws it on a canvas, so the result can differ from what the browser shows. Its own FAQ says it will never have full CSS support.
box-shadow, filter, object-fit, mix-blend-mode, and border-image aren't drawn, and transforms have limited support.scale defaults to the device pixel ratio, and browsers cap canvas size, so very tall captures can come out blank or cut off.The latest release, 1.4.1, is from January 2022, and the README still describes the project as very experimental.
HTML/CSS to Image
Render HTML/CSS with a full Chromium browser engine, including grid, z-index, calc(), box-shadow, filters, and web fonts.
Send your HTML/CSS directly or capture a webpage URL, using the same browser rendering model as your site.
html2canvas
Supports common properties like flexbox, borders, and positioning, with limited transform support. box-shadow, filter, and object-fit aren't supported.
Its FAQ says it will never have full CSS support.
HTML/CSS to Image renders your HTML/CSS with a full browser engine on its servers, so the image looks the same no matter who requests it, and CSS like box-shadow and filter works as it does in a browser.
You get a hosted URL you can share, embed, or put in og:image, plus PDFs, URL screenshots, and templates. The trade-off is an API call: send the element's HTML and CSS to HTML/CSS to Image instead of drawing it from the visitor's page.
HTML/CSS to Image
Hosting and CDN delivery are included. Application-level caching keeps an existing image URL reusable, even after a CDN cache miss, without consuming another image credit.
Paid plans keep images while your account is active. Custom-storage-only images use your own delivery.
html2canvas
Returns a canvas element in the page. Uploading and hosting the image is up to you.
Plans and pricing
html2canvas is free under the MIT license and runs on your visitors' devices, so there's no rendering bill. If you need the image outside the page, uploading and hosting it is up to you. HTML/CSS to Image charges per created image, with server-side rendering and hosting included.
$14/month for 1,000 images on Basic.
Includes templates, the visual editor, and hosted image delivery. A free plan includes 50 images per month.
Free and open source under the MIT license.
Rendering runs on your visitors' devices.
$69/month for 10,000 images on Basic.
Optional overages cost $10 per 1,000 images. Includes templates, hosted image delivery, storage destinations, and bring-your-own proxies at this volume.
No per-image cost. Storing and serving any images you keep is up to you.
html2canvas can't generate images without a visitor's browser.
html2canvas redraws the page from the DOM instead of taking a real screenshot, and box-shadow is on its list of unsupported properties, along with filter, object-fit, and mix-blend-mode. HTML/CSS to Image renders with a full browser engine, so those properties work.
Cross-origin images need CORS headers or a proxy. Without them, html2canvas leaves them out, or taints the canvas so it can't be exported. HTML/CSS to Image takes a real browser screenshot, so there's no canvas to taint, and images that load on the page appear in the result.
No. Its README says it isn't suitable for Node.js, because it depends on the browser. To generate images on a server, send the HTML/CSS to HTML/CSS to Image instead.
Its latest release, 1.4.1, is from January 2022, and the README describes the project as very experimental.
See the output for yourself
Paste some HTML/CSS, screenshot a URL, or fill in a template. The demo below calls the real API, and you don't need an account.
Preparing the live playground
Loading it just before you reach this section keeps the initial page fast.
Keep comparing
Puppeteer gives you the browser itself, along with the job of running it. HTML/CSS to Image gives you the image: HTML/CSS rendering, URL screenshots, templates, and hosting, with no browser fleet to operate.
Read the comparison HTML/CSS to Image vsVercel OG draws Open Graph images from JSX using flexbox and a subset of CSS. HTML/CSS to Image renders your complete HTML/CSS, with templates, hosting, and URL screenshots built in.
Read the comparison HTML/CSS to Image vsBrowserless hosts browsers for your Puppeteer and Playwright scripts. HTML/CSS to Image skips the scripts: send HTML, a URL, or template values and get back a hosted image.
Read the comparison HTML/CSS to Image vsURL2PNG does one thing well: screenshots of pages you already host, through a signed URL. HTML/CSS to Image adds a visual editor, templates, and resizing or format changes that don't cost another credit.
Read the comparison HTML/CSS to Image vsScreenshotAPI.net covers a lot of website capture at low prices: HTML input, PDFs, scrolling video, scraping, and scheduled jobs. HTML/CSS to Image focuses on designing, reusing, and safely embedding your images.
Read the comparison HTML/CSS to Image vsScreenshot Machine is a no-frills, inexpensive way to screenshot existing webpages, with a free plan and a separate PDF API. HTML/CSS to Image also renders your own HTML/CSS and adds templates and image reuse.
Read the comparisonStart creating for free
Render HTML/CSS, capture webpages, or generate images from reusable templates.
No credit card required