PageCapture
Start free
Use casesGuidesDocsPlaygroundPricingLog in
Free tool

HTML to Image

Paste HTML, get the PNG a real browser renders — your CSS and your web fonts included.

A PNG rendered by Chromium at the width you pick, as tall as your markup, with your own CSS applied.

Capture settings
Enter the source, choose your options, then run the capture.

PNG keeps the alpha channel; a lossy format would flatten it to black.

Result
Your capture will appear here and stay in view.
waiting

No result yet

Complete the settings and run the tool. Images, PDFs, text, and video all preview in this panel.

Send this exact request
cURL, TypeScript and Python are generated from the same configuration as the demo.
curl --fail-with-body "https://api.pagecapture.dev/v1/take" \
  -H "X-Access-Key: $PAGECAPTURE_KEY" \
  -H "Content-Type: application/json" \
  --data '{"html":"<div id=\"card\" style=\"width:1200px;padding:88px;font:700 64px/1.15 system-ui,sans-serif;color:#fff;background:linear-gradient(120deg,#141324,#3f2b96)\"><p style=\"margin:0 0 28px;font-size:22px;letter-spacing:.2em;opacity:.65\">CHANGELOG</p>Ship the image your app renders itself</div>","viewport_width":"1200","format":"png","full_page":true,"viewport_height":100}' \
  -o capture.png

Questions

Is the image watermarked?
No. The file you get here is byte-for-byte what the API returns for the same parameters.
Do my web fonts load?
Yes, over https, and the capture waits for them before shooting. A face that never resolves falls back silently — that failure and how to catch it is the subject of the font guide linked below.
Can I get a transparent background?
Yes. Leave the background off your markup and tick the box: this tool writes PNG, which keeps the alpha channel. JPEG and WebP-lossy would flatten it.
How tall is the image?
As tall as your markup. The capture grows with the document, so the file has no empty strip under the content. A `100vh` rule measures the 100px floor this tool renders on rather than a full screen — send your own `viewport_height` in the API call when you need a fixed frame.
Can I crop the image to one element?
Not in this form, because the API refuses `selector` and `full_page` together and this tool sizes the image to your content. Send `selector: "#card"` without `full_page` in the API call and you get the element on its own.
Can I turn an image back into HTML?
No. This renders your markup into an image, not the other way around. Reading content back out of an image is a different kind of tool.

Need this in your own code?

This tool is one call to the PageCapture API. The free plan gives you 100 captures a month with every feature unlocked, and no card.

Get an API keySee the docs

Guides that cover this in depth

Doing this in your app

HTML to image
Render your own HTML into an image

Skip hosting a page. Send the markup and get the rendered result, with your own fonts and CSS.

Related tools