Can I use my own background color?

Yes. Choose "Solid color" in the Background dropdown and set any hex color with the picker or text input. The six gradient presets are fixed pairs.

How does the generator handle long titles?

The renderer wraps text across lines and reduces the font size step by step, from 84px down to 36px, until the whole headline fits inside the card without clipping.

Does the exported image include the Fernandes Labs mark?

Yes, a small "Fernandes Labs" wordmark is drawn in the bottom-right corner at reduced opacity. It is part of the rendered canvas and cannot be toggled off.

What is the CSS snippet for?

It shows the equivalent background and text color as a CSS declaration, useful when you want the share image to blend with the same colors on your landing page.

Can I export at other sizes like 1080×1080?

No, output is always 1200×630. For square feed images you would need to crop afterwards or use a different generator.

Media

Social Image Generator

Design and export social share images on a canvas.

socialimageogsharecanvas

Loading tool…

Recommended tools

Cloudflare

Image optimization and delivery at the edge.

Affiliate links — we may earn a commission if you sign up.

About the Social Image Generator

The Social Image Generator designs Open Graph share cards on a live 1200 × 630 canvas, the exact dimensions that Facebook, LinkedIn, and X crop and display in link previews. Type a title and an optional subtitle, pick one of six curated gradients — Sunset, Ocean, Forest, Berry, Charcoal, or Amber — or switch to a solid color, then tune the text color. The renderer draws a subtle vignette overlay, wraps long titles across multiple lines, and automatically shrinks the headline from 84px down to a readable minimum so nothing overflows the frame. A "Fernandes Labs" brand mark sits in the bottom-right corner by default. Export happens with one click to a social-image.png file, and the tool also emits a matching CSS background snippet you can paste into a stylesheet. Because everything renders locally on a canvas, this free OG image generator keeps draft campaigns private. For developers and marketers who would rather not open Photoshop to ship a shareable link preview, the tool collapses the design loop into minutes — write, preview, export, and paste the og:image meta tag.

Hand-written guide

Examples

Input

Title "Build better tools with Fernandes Labs", subtitle "A modern developer toolkit, crafted with care.", Sunset gradient, white text.

Output

A 1200×630 PNG with an orange-to-peach diagonal gradient, vignette, and two lines of centered-left white text.

Note: The defaults ship as a complete, presentable card — only the wording needs changing.

Input

Title "Launching the API in public beta", subtitle left empty, Background set to "Solid color" with #0f172a, text color #ffffff.

Output

A dark navy card with just the headline, vertically centered, and the brand mark in the corner.

Note: Clearing the subtitle removes the second line entirely, so the headline gets more room.

Input

A long headline like "Everything we learned rewriting our search pipeline in Rust over six months" with the Ocean gradient.

Output

The title wraps to two or three lines and the font size shrinks automatically from 84px to fit.

Note: The auto-fit logic guarantees no clipping, even for wordy titles.

How to use

1
Enter your headline in the "Title" field and optional supporting text in "Subtitle".
2
Choose a preset in the "Background" dropdown, or select "Solid color" and pick a custom fill.
3
Set the "Text color" with the color picker or the hex input next to it.
4
Review the live 1200 × 630 canvas preview; long titles wrap and shrink automatically.
5
Click "Download PNG" to save social-image.png, and copy the CSS snippet if you need a matching background.

Common use cases

Creating an og:image for a blog post so shared links render with a branded card.
Designing consistent X and LinkedIn share images for a product launch series.
Producing a fallback card for pages that currently lack any social preview image.
Making announcement cards for a Discord community or newsletter archive.
A/B testing gradient versus solid backgrounds for higher click-through on shares.
Generating quick placeholder cards while a designer prepares final artwork.

Best practices

Keep titles under 12 words so the auto-fit keeps the font near its largest size.
Verify white text against lighter gradients — Charcoal and solid dark fills are safest.
Match the gradient to your brand palette rather than picking purely by preference.
Leave the subtitle empty for bold, single-message announcements.
Preview at small sizes too, since social feeds show cards at roughly 600px wide.

Tips

Change any field and the preview redraws instantly — no apply button needed.
The vignette darkens the bottom edge, so short cards still feel balanced.
Use the same gradient name across a series for instant visual consistency.
Test your headline in both the preview and the downloaded PNG to confirm font loading.

Frequently asked questions

The canvas is fixed at 1200 × 630 pixels, the standard Open Graph image size. It matches the aspect ratio that most social platforms display in link previews.

Explore more media tools

Browse the full collection of media tools on the hub, or jump back to all categories.

All Media tools All categories