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:#b9502a;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:#b9502a"></span>
    Blog
  </span>
  <div style="display:flex;flex-direction:column;gap:18px">
    <h2 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</h2>
    <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:#b9502a;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

Frequently Asked Questions

What is this tool for?

It creates Open Graph and Twitter or X preview images — the cards that appear when your link is shared — along with LinkedIn banners and YouTube thumbnails.

What size should an Open Graph image be?

1200 by 630 pixels is the standard for Open Graph and large Twitter cards, and this tool exports at that size by default.

Is anything uploaded?

No. Your text and design choices stay in your browser. You download the finished PNG when you are ready.

Do I need design skills?

No. Start from a preset, change the text and colors, and export. The layout and safe margins are handled for you.

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.

Related free tools

Browse all tools

Markdown to Image

Convert markdown to PNG screenshots for Twitter, LinkedIn, and blogs. 6 themes (light, dark, sepia, Dracula, Nord, Solarized), retina export. 100% client-side, free.

Code to Image

Turn code snippets into Carbon-style screenshots for Twitter, LinkedIn, blogs, and docs. 8 themes, 10 languages, gradient backgrounds. Free tool + free API.

Lorem Ipsum & Random Text Generator

Generate lorem ipsum, random text, dummy text, or placeholder text. Paragraphs, sentences, or words — up to 10,000.

Markdown Editor

Write Markdown and preview rendered HTML in real time. Side-by-side editor with export.