HTML to PNG with cURL

Generate PNG images with cURL

No browser management required

Render HTML and CSS from cURL without installing Chrome, running a local browser process, or building a separate image-storage pipeline.

Start free Read the docs
  • No browser processes to maintain
  • Consistent managed Chromium rendering
  • Complete cURL request below
Real HTML and CSS requests followed by their generated images.
View example Request
POST https://hcti.io/v1/image
html
<div class="p-4 background d-block text-center" style="width: 500px">
  <span class="tweet-text mb-4">
    This is Little Bear. He tolerates baths because he knows how phenomenal his
    floof will appear afterwards. 13/10
  </span>
  <div class="mt-2 p-4">
    <img src="https://docs.htmlcsstoimage.com/assets/images/dog.jpg" class="rounded-circle shadow border mt-4" width="100px">
  </div>
  <h4 class="mt-2">
    WeRateDogs
  </h4>
  <span>@dog_rates</span>
</div>

<!-- Include external CSS, JavaScript or Fonts! -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700" rel="stylesheet">
css
.tweet-text {
  background-color: #fff2ac;
  background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);
  font-weight: bolder;
  font-size: 32px;
  font-family: 'Roboto', sans-serif;
  padding: 4px;
}

.background {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='400' cy='400' r='50%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230EF'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='400' cy='400' r='70%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230FF'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='800'/%3E%3Cg fill-opacity='.8'%3E%3Cpath fill='url(%23b)' d='M998.7 439.2c1.7-26.5 1.7-52.7 0.1-78.5L401 399.9c0 0 0-0.1 0-0.1l587.6-116.9c-5.1-25.9-11.9-51.2-20.3-75.8L400.9 399.7c0 0 0-0.1 0-0.1l537.3-265c-11.6-23.5-24.8-46.2-39.3-67.9L400.8 399.5c0 0 0-0.1-0.1-0.1l450.4-395c-17.3-19.7-35.8-38.2-55.5-55.5l-395 450.4c0 0-0.1 0-0.1-0.1L733.4-99c-21.7-14.5-44.4-27.6-68-39.3l-265 537.4c0 0-0.1 0-0.1 0l192.6-567.4c-24.6-8.3-49.9-15.1-75.8-20.2L400.2 399c0 0-0.1 0-0.1 0l39.2-597.7c-26.5-1.7-52.7-1.7-78.5-0.1L399.9 399c0 0-0.1 0-0.1 0L282.9-188.6c-25.9 5.1-51.2 11.9-75.8 20.3l192.6 567.4c0 0-0.1 0-0.1 0l-265-537.3c-23.5 11.6-46.2 24.8-67.9 39.3l332.8 498.1c0 0-0.1 0-0.1 0.1L4.4-51.1C-15.3-33.9-33.8-15.3-51.1 4.4l450.4 395c0 0 0 0.1-0.1 0.1L-99 66.6c-14.5 21.7-27.6 44.4-39.3 68l537.4 265c0 0 0 0.1 0 0.1l-567.4-192.6c-8.3 24.6-15.1 49.9-20.2 75.8L399 399.8c0 0 0 0.1 0 0.1l-597.7-39.2c-1.7 26.5-1.7 52.7-0.1 78.5L399 400.1c0 0 0 0.1 0 0.1l-587.6 116.9c5.1 25.9 11.9 51.2 20.3 75.8l567.4-192.6c0 0 0 0.1 0 0.1l-537.3 265c11.6 23.5 24.8 46.2 39.3 67.9l498.1-332.8c0 0 0 0.1 0.1 0.1l-450.4 395c17.3 19.7 35.8 38.2 55.5 55.5l395-450.4c0 0 0.1 0 0.1 0.1L66.6 899c21.7 14.5 44.4 27.6 68 39.3l265-537.4c0 0 0.1 0 0.1 0L207.1 968.3c24.6 8.3 49.9 15.1 75.8 20.2L399.8 401c0 0 0.1 0 0.1 0l-39.2 597.7c26.5 1.7 52.7 1.7 78.5 0.1L400.1 401c0 0 0.1 0 0.1 0l116.9 587.6c25.9-5.1 51.2-11.9 75.8-20.3L400.3 400.9c0 0 0.1 0 0.1 0l265 537.3c23.5-11.6 46.2-24.8 67.9-39.3L400.5 400.8c0 0 0.1 0 0.1-0.1l395 450.4c19.7-17.3 38.2-35.8 55.5-55.5l-450.4-395c0 0 0-0.1 0.1-0.1L899 733.4c14.5-21.7 27.6-44.4 39.3-68l-537.4-265c0 0 0-0.1 0-0.1l567.4 192.6c8.3-24.6 15.1-49.9 20.2-75.8L401 400.2c0 0 0-0.1 0-0.1L998.7 439.2z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}
format
png
google fonts
Roboto
https://hcti.io/v1/image/019fb441-e2ee-706a-8dd4-82f9dfd9b638.png
Social card with a fun SVG background and highlighted text.

cURL workflow

Test the render before adding it to cURL

Adjust the HTML and CSS here, then use the cURL example below instead of recreating the browser-rendering workflow locally.

Managed rendering

Skip the fragile parts of native cURL browser automation

Keep the application code focused on the request and response while HCTI manages Chromium, render isolation, retries, and hosted output.

No browser runtime to maintain

Use HCTI from shell scripts and automation without installing a browser or maintaining a browser-control program.

Predictable production rendering

Use managed browser versions, isolated render jobs, built-in timing controls, and consistent viewport behavior across deployments.

A usable image URL immediately

Receive the hosted .png result without building a separate pipeline for temporary files, uploads, storage, and delivery.

HTML to image API

Send one cURL request instead of running a browser

POST the HTML, CSS, and format from cURL. HCTI handles the browser lifecycle and returns the generated .png URL.

  • HTML and CSS input

    Send complete markup and styles, including browser-supported fonts, images, SVG, and JavaScript.

  • PNG output

    Set format to png and use the hosted .png URL returned by the API.

  • Viewport and crop controls

    Set viewport dimensions and device scale, or crop the result to a CSS selector.

  • Page environment

    Choose light or dark mode, timezone, and screen or print media.

POST https://hcti.io/v1/image request example.
Request
POST https://hcti.io/v1/image
{
"html": "<article class='card'>...</article>",
"css": ".card { display: grid; width: 1200px; }",
"format": "png",
"viewport_width": 1200,
"viewport_height": 630
}

How it works

From markup to a finished PNG

  1. Send HTML and CSS

    Submit the content with format set to png and any viewport or browser settings.

  2. Chromium renders the design

    The API loads the markup, styles, fonts, and assets in a managed browser environment.

  3. Use the .png URL

    Embed the hosted result, download the file, or save it in your own storage and application records.

Output formats

One API, the format your workflow needs

Keep the same HTML and CSS. Choose lossless detail, compact compatibility, modern web delivery, or a paginated document.

Looking to capture a webpage as PNG? Explore URL to PNG in cURL
Compact + universal
.jpeg

HTML to JPEG

Smaller files and broad compatibility for photography, previews, and content-heavy pages.

Explore JPEG
Modern + efficient
.webp

HTML to WebP

Strong visual quality, transparency, and modern compression for web delivery.

Explore WebP
Document + printable
.pdf

HTML to PDF

Paginated documents with page sizing, margins, backgrounds, and print styles.

Explore PDF

Example code

Render HTML to PNG in cURL

Copy a complete cURL request. Authentication, HTML, CSS, viewport settings, and response handling are shown together.

curl --fail-with-body --request POST 'https://hcti.io/v1/image' \
  --user "$HCTI_API_ID:$HCTI_API_KEY" \
  --data-urlencode 'html=<div class="card">
  <h1>Hello, world!</h1>
  <p>Generated from HTML and CSS.</p>
</div>' \
  --data-urlencode 'css=.card {
  width: 480px;
  padding: 40px;
  background: #f0fdf4;
  color: #052e16;
  font-family: sans-serif;
}' \
  --data-urlencode 'format=png'
Read the cURL Docs

Ready to render?

Create your first PNG from HTML and CSS

Send HTML and CSS to the API and receive a hosted .png image URL without running browser infrastructure.

Start free Read the docs