PageCapture
Start free
Use casesGuidesDocsPlaygroundPricingLog in
Free tool

HTML to PNG

Paste HTML, get a lossless PNG - with transparency intact and at the pixel density you need.

A lossless PNG at the density you pick, with the alpha channel preserved when you ask for it.

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

2x doubles every dimension of the file. Text and hairlines stay sharp on a retina screen.

Leave the background off your markup and the PNG keeps the alpha channel.

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=\"badge\" style=\"width:560px;padding:56px;border:3px solid #111;border-radius:32px;font:700 40px/1.2 system-ui,sans-serif;color:#111\">Build passing<p style=\"margin:16px 0 0;font-size:20px;font-weight:500;opacity:.55\">pagecapture - main</p></div>","viewport_width":"640","device_scale_factor":"1","format":"png","full_page":true,"viewport_height":100}' \
  -o capture.png

Questions

Why is my PNG so large?
PNG is lossless, so photographic content and smooth gradients cost far more than flat colour - and each step of pixel density multiplies that. If the content is a photograph, the JPEG tool produces a much smaller file at the same perceived quality.
Does 2x make the image bigger on screen?
It makes the file bigger, not the layout: the same CSS pixels are rendered with more device pixels. That is what keeps text sharp on a retina display instead of soft.
Why is my transparent PNG still white?
Something in the markup is painting a background - often a rule on body or on the outermost element. Transparency needs both the box ticked and nothing opaque behind your content.
Is the image watermarked?
No. The file you get here is byte-for-byte what the API returns for the same parameters.

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