HTML-to-image for sales

Create personalized sales images from CRM data

Turn account, prospect, and opportunity data into consistent visual briefs, proposal graphics, and outreach images without manual design work.

Start free Read the docs
  • CRM-driven images
  • Personalized outreach
  • Consistent sales collateral
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;
}
google fonts
Roboto
https://hcti.io/v1/image/019fb441-e2ee-706a-8dd4-82f9dfd9b638
Social card with a fun SVG background and highlighted text.

Live demo

Turn HTML and CSS into an image

Edit the HTML and CSS, choose the image settings, and render the result with the same API used in production.

Use cases

Generate useful visuals for every account

Read the docs

Account summaries

Render key company, contact, opportunity, and activity data into a visual brief for representatives.

Personalized outreach

Generate prospect-specific images using CRM fields, campaign copy, and approved branding.

Proposal graphics

Create pricing, package, timeline, and comparison visuals from current opportunity data.

Pipeline updates

Turn stage, value, progress, and next-step data into images for reports and team communication.

How it works

From markup to a finished image

  1. Send HTML and CSS

    Authenticate from your server and submit the content with any viewport, format, 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 image URL

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

HTML to image API

Render web content without running a browser

Send HTML and CSS directly to the API. Headless Chromium loads your content, applies the requested dimensions and browser settings, and returns a hosted image URL.

  • HTML and CSS input

    Send complete markup and styles directly, including links to external fonts, stylesheets, and images.

  • Chromium rendering

    Render modern browser layouts without installing, updating, or scaling Chromium yourself.

  • Viewport and crop controls

    Set viewport size 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; }",
"viewport_width": 1200,
"viewport_height": 630
}

Web-native rendering

Build images with browser technologies

Use the same HTML, CSS, web fonts, and design system as your application.

HTML for structure

Use semantic markup, tables, SVG, and reusable components to define the content of each image.

CSS for presentation

Apply layouts, responsive styles, web fonts, gradients, and the same design system used by your application.

Images ready to use

Receive a hosted image URL for product UI, social posts, email, reports, and automated publishing workflows.

Ready to render?

Create your first image from HTML and CSS

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

Start free Read the docs

HTML-to-image workflows

HTML-to-image workflows by team

See how developers, marketers, sales teams, and AI agents turn application data into images.

AI & Agents

Render agent summaries, reports, and visual responses from HTML and CSS.

View workflow

Developers

Generate images from application HTML and CSS without maintaining a browser service.

View workflow

Marketing

Generate branded campaign, social, and personalized images from live data.

View workflow