Image Generator

HTML + inline CSS

<div style="width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:72px 80px;background:#ffffff;font-family:Inter,system-ui,sans-serif;position:relative">
  <div style="position:absolute;top:0;left:0;right:0;height:8px;background:#6366f1;display:flex"></div>
  <span style="display:flex;align-items:center;gap:10px;font-size:22px;color:#64748b;font-weight:600;letter-spacing:0.06em;text-transform:uppercase">
    <span style="display:flex;width:10px;height:10px;border-radius:999px;background:#6366f1"></span>
    Blog
  </span>
  <div style="display:flex;flex-direction:column;gap:18px">
    <h1 style="font-size:72px;font-weight:800;color:#0f172a;margin:0;line-height:1.1;letter-spacing:-0.03em;max-width:1040px">Your headline goes here</h1>
    <p style="font-size:26px;color:#64748b;margin:0;line-height:1.4;max-width:900px;display:flex">A short supporting line explaining what this is about.</p>
  </div>
  <div style="display:flex;align-items:center;justify-content:space-between">
    <span style="font-size:22px;color:#64748b;font-weight:600">quillly.com</span>
    <span style="font-size:22px;color:#6366f1;font-weight:700;letter-spacing:0.04em">@quillly</span>
  </div>
</div>

1,227 / 10,000

tab = 2 spaces

Blog

Your headline goes here

A short supporting line explaining what this is about.

quillly.com @quillly

1200×630Open Graph (universal)

Free Image Generator API

Generate Open Graph images, X/Twitter headers, LinkedIn banners, Instagram posts, YouTube thumbnails, and more — from your own HTML. No signup, no API key, no watermark. Pick a preset canvas size (so you don't have to Google “Instagram post dimensions”), write your HTML with inline styles, and download the PNG. Or POST to our API to automate it.

How it works

Pick a preset size (21 presets across social, headers, posts, stories, thumbnails).
Edit the HTML in the built-in editor — or load a sample and tweak it.
Live preview updates automatically as you type.
Download the PNG or copy the API call to use it in your code.

Using the API

POST to https://quillly.com/tools/image-generator/api/generate with JSON body { html, width, height, format }. You'll get back a signed R2 URL (3-hour expiry). Full spec and more examples at /tools/api-docs.

Constraints (Satori)

HTML max 10 KB, inline styles only
Every element must set display: flex (or be a leaf like <span>)
Images must be https:// or data:image/...
Canvas max 2400×2400
Rate limit: 60 requests/hour per IP

Automation

Want OG images generated for every blog, automatically?

Quillly's MCP server connects to Claude, ChatGPT, or Cursor — your AI creates blogs with matching cover images and publishes them to your domain.