Link Search Menu Expand Document

HTML/CSS to Image API

Your search for pixel perfect image generation ends here.

Live demo Get an API Key


The API for generating high quality images from HTML/CSS. No yak shaving required.

  • converts HTML to png, jpg or webp
  • screenshot any url
  • no janky fonts, or blurry images

Converting HTML to a png

This image was created using just HTML/CSS and the HCTI API.

Image auto generated with HTML/CSS to Image
<div class="p-4 text-center mt-4" 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 class="text-muted">@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=Cabin:wght@700&display=swap" rel="stylesheet">

Try it yourself


Quick start example code

To get started quickly, take a look at our example code.

Prefer #NoCode? We also integrate with Zapier and Make.

Works with any language

Your favorite language not here? Don’t worry, we work with any language or framework. See the curl example for how to make a request. Email us if you need help getting started. We’d love to add more example code here.


Image Examples

Your imagination is the only limit. We render HTML/CSS just like Google Chrome. Here are a few examples of ways people have used the API to automate their image generation.

Social Images: Dev.to

Dev.to uses the API to autogenerate thousands of custom images for Twitter and Facebook.

Dev.to social card generated from HTML

To see how they do it, take a look at their code (it’s open source!).

Product Hunt Makers Social Cards

Product Hunt social image

Product Hunt uses HTML/CSS to Image to dynamically generate social cards for Maker Goals.

Source code for this example on CodePen.

Remote Stories Social Cards

Remote stories social image from html

Source code for this example on CodePen.

Highlighted Text Shots

Generate images from your users comments. Add the ability to highlight and share.

User comment auto generated text shot

Source code for this example on CodePen.

Auto Generated Job Listing

Generate images from job listings for sharing in emails, ads or social media.

Autogenerated image for a job advertisement

Source code for this example on CodePen.

Full Webpage Screenshots

Pass a URL or entire webpage to the API to generate a full page screenshot. Here we passed stripe.com’s to the API.

Convert a url to a screenshot API

Screenshot part of a page

Use the selector param to focus on a specific part of a page.

Use a CSS selector to crop an image

Resize on the Fly

Once an image is generated, use query params to adjust to any size you need with the width and height params. When only one param is passed, the API will maintain the aspect ratio of the original image.

?width=400

Auto adjust the width of your image

?height=300

Auto adjust the height of your image


Get an API key

To use this API, you’ll first need an API key. You may retrieve one by signing up here.

Free API Key API Docs


Back to top

Built with extensive integration tests and serious care for developer happiness.
© 2018-2024 Code Happy, LLC.

Page last modified: Mar 1 2024 at 01:46 AM.

Edit this page on GitHub.