Paste HTML and CSS and download a JPG, rendered in real Chromium so web fonts, grid and gradients look exactly as in your browser. Smaller than PNG for photo-heavy designs. Free, no signup.
Free to try: 5 renders/day. The image height fits your content.
JPG is lossy, so designs with photos, gradients or textured backgrounds come out much smaller than PNG, which suits email, social posts and upload forms that cap file size. JPG has no transparency: transparent areas are filled with white. With the API, send format: "jpeg" and optionally quality (10-100, default 80). For crisp text on flat colours or a transparent background, use PNG.
Also: HTML to image, HTML to PNG, 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 DOCX · HTML to PNG Converter · HTML Minifier · HTML Encode · HTML Decode · HTML Beautifier · DOCX to HTML · TIFF to JPG · AVIF to JPG Converter · BMP to JPG Converter · all free tools