Image Generator

Free

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)

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, in your browser.

QR Code Generator

Generate QR codes as PNG or SVG for URLs, WiFi, vCard, email, SMS, phone, and more. Custom colors, sizes, error correction. Free, in your browser.

Markdown Editor

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

QuilllyPublish it on your domain

Quillly hosts, scores and indexes your blog — written with your own AI.

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.