Paste HTML and CSS and download a lossless PNG, rendered in real Chromium so web fonts, grid and shadows come out exactly as in your browser. Transparent background and 2x retina in one click. Free, no signup.
Free to try: 5 renders/day. The image height fits your content.
PNG is lossless, so text, thin borders and flat colours stay crisp, and it is the only common format here with transparency. To get a transparent PNG, tick the box and leave html and body without a background: Chromium paints white otherwise. The API equivalent is omit_background: true. For photos or big gradients, a JPG is usually several times smaller.
Also: HTML to image, HTML to JPG, HTML to PDF, SVG to PNG.
POST your HTML to /v1/screenshot. Every option from this page is a parameter: width, full_page, format (png, jpeg, webp), omit_background, device_scale_factor, and selector to capture one element only.
curl -X POST https://shotmint.creasework.com/v1/screenshot -H "X-API-Key: YOUR_KEY" -H "Content-Type: application/json" \
-d '{"html": "<h1 style=\"color:#4f46e5\">Hello</h1>", "width": 800, "full_page": true, "omit_background": true}' -o hello.pngNode.js:
const res = await fetch('https://shotmint.creasework.com/v1/screenshot', {
method: 'POST',
headers: { 'X-API-Key': process.env.SHOTMINT_KEY, 'Content-Type': 'application/json' },
body: JSON.stringify({ html, width: 1080, full_page: true, format: 'png' }),
});
await fs.promises.writeFile('card.png', Buffer.from(await res.arrayBuffer()));html2canvas redraws the page on a canvas with its own CSS engine, so anything it doesn't implement silently disappears. On 2026-10-21 we put 13 common CSS features in 240×120 boxes and captured each box twice in the same Chromium: once with html2canvas 1.4.1 (the current npm release) and once as a real screenshot, which is what this converter returns.
| CSS feature | html2canvas 1.4.1 |
|---|---|
box-shadow on a rounded card | Wrong: the card is filled grey and the corners are cut square |
filter: blur() grayscale() | Ignored: sharp, full-colour gradient |
Gradient text (background-clip: text) | Wrong: a solid gradient rectangle, the text is gone |
conic-gradient (pie or colour wheel) | Missing: blank |
clip-path: polygon() | Ignored: a square instead of a triangle |
mix-blend-mode: multiply | Ignored: no overlap colour |
mask-image fade | Ignored: no fade |
outline + outline-offset | Missing: only the border is drawn |
text-overflow: ellipsis | Ignored: text cut mid-word, no "…" |
Plain text, text-shadow, colour emoji, transform: rotate() skew() | Correct |
So 9 of the 13 were wrong or missing, and that was in a desktop browser. html2canvas also needs a DOM, so it can't run in your backend at all. A real browser renders exactly what your users see, and the API means you don't have to run Chromium yourself.
With full_page on, the image is exactly as tall as your HTML: a 244px ticket gives a 244px image, with no white band below. Margins on the outer element are included, so keep a margin if you want space around a card's shadow. If the layout fills the viewport on purpose (height: 100vh with a doctype) or you send an explicit height, that height is kept.
Comparing hosted HTML-to-image APIs? See Shotmint vs HTML/CSS to Image.
Pay as you go: €5 for 2,000 renders, no subscription, and credits never expire. Get 25 free API renders a month
PDF to HTML · HTML to image · HTML to PDF · HTML formatter · Word to HTML · HTML to Markdown · HTML to Word · Markdown to HTML · Online HTML editor · HTML viewer · HTML to JPG Converter · HTML to DOCX · HTML Minifier · HTML Encode · HTML Decode · HTML Beautifier · DOCX to HTML · PNG to ICO · AVIF to PNG Converter · all free tools