Design Custom OG Image Templates with HTML & CSS
The 5 built-in templates cover common cases — blog posts, social cards, product cards. But what if you need your brand colors, your logo, your layout?
Custom templates let you design OG images with full HTML/CSS control, then generate them via the same API.
How it works
- Write an HTML template with
{{variable}}placeholders - Save it in the dashboard editor (or via API)
- Call
POST /v1/og-imagewith your template slug and data - Get back a pixel-perfect image
Step 1: Design your template
Start with this skeleton:
<div style="
width: 1200px;
height: 630px;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 60px;
font-family: system-ui, -apple-system, sans-serif;
color: white;
">
<div>
<div style="
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
color: #10b981;
margin-bottom: 20px;
">{{tag}}</div>
<h1 style="
font-size: 52px;
font-weight: 700;
line-height: 1.2;
margin: 0;
">{{title}}</h1>
</div>
<div style="
display: flex;
align-items: center;
gap: 16px;
">
<div style="
width: 48px;
height: 48px;
border-radius: 50%;
background: #10b981;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 600;
">{{author_initial}}</div>
<div>
<div style="font-size: 18px; font-weight: 500;">{{author}}</div>
<div style="font-size: 14px; color: #94a3b8;">{{date}}</div>
</div>
</div>
</div>Step 2: Save in the editor
Go to Dashboard → Templates → Create Template. Paste your HTML, give it a name (e.g. "branded-blog"), and save. The editor shows a live preview as you type.
Step 3: Generate images
curl -X POST "https://api.snapsharp.dev/v1/og-image" \
-H "Authorization: Bearer sk_live_..." \
-H "Content-Type: application/json" \
-d '{
"template": "branded-blog",
"data": {
"title": "We Just Raised Our Series A",
"author": "Sarah Chen",
"author_initial": "S",
"date": "March 24, 2026",
"tag": "Company News"
}
}' -o og.pngOr with the SDK:
const image = await snap.ogImage('branded-blog', {
title: 'We Just Raised Our Series A',
author: 'Sarah Chen',
author_initial: 'S',
date: 'March 24, 2026',
tag: 'Company News',
});Design tips
Dimensions: Always use width: 1200px; height: 630px on your root element. This is the standard OG image size that works on all platforms.
Fonts: Use system fonts. External font files won't load. system-ui, -apple-system, 'Segoe UI', sans-serif renders consistently.
Text size: OG images display at ~500px on most social platforms. Use minimum 40px for titles, 18px for body text.
Colors: Dark backgrounds with light text tend to pop in social feeds. Avoid pure white backgrounds — they blend in with the platform UI.
Testing: Use the OG Preview tool to see how your images look on Twitter, LinkedIn, and Facebook.
Built-in vs custom
| Built-in | Custom | |
|---|---|---|
| Plan required | Starter+ | Growth+ |
| Editable | No | Full HTML/CSS control |
| Templates available | 5 | Unlimited |
| Brand customization | bg_color only | Everything |
Availability
Custom templates require a Growth plan or above ($49/mo). Built-in templates are available on Starter+ ($19/mo).
Full documentation: snapsharp.dev/docs/custom-templates