DevTools Logo

OG Image Generator

OG Image Generator

Create Open Graph images for social media sharing. Design cards with custom text, colors, and gradients.

Content

Add your title, description, and site name

Design

Choose a template and colors

Examples

Render a dark 1200x630 gradient card

Input
Title: Deploy Faster with DevTools
Template: Gradient
Start color: #1a1a2e
Size: 1200x630
Output
Canvas: 1200x630
Text color: #ffffff
Download: og-image-1200x630.png

The luminance calculation selects white text for the dark first color, and download uses the selected dimensions in the filename.

Render a light 1200x675 minimal card

Input
Title: Release Notes
Template: Minimal
Background color: #f0f0f0
Size: 1200x675
Output
Canvas: 1200x675
Text color: #000000
Download: og-image-1200x675.png

A light solid background selects black text and produces the alternate 1200x675 PNG.

About this tool

OG Image Generator draws a social preview card into an HTML canvas from a title, optional description, optional site name, template, colors, and output size. Minimal uses one solid background, Gradient blends two colors diagonally, and Bold centers an oversized title with an optional site name at the bottom.

The component supports 1200x630 and 1200x675 canvases. It estimates line width from the font size, reduces long titles until they fit within at most three lines or reach 24 pixels, limits descriptions to three rendered lines, and chooses black or white text from the first background color's relative luminance. Bold mode intentionally omits the description.

Every edit redraws a scaled browser preview. Download redraws the same configuration at full resolution, serializes the canvas as PNG, and saves it as og-image-1200x630.png or og-image-1200x675.png without uploading the design to a server.

How to use

  1. Enter the card content

    Set the required title and, when the chosen layout uses them, add a description and site name. Watch the canvas preview update after each edit.

  2. Choose a template

    Use Minimal for a solid text card, Gradient for a two-color background, or Bold for a large centered title with no description rendering.

  3. Set colors and dimensions

    Choose six-digit background colors and select 1200x630 for the Open Graph option or 1200x675 for the Twitter Card option.

  4. Preview and download

    Confirm wrapping and contrast in the preview, then click Download PNG to save the full-resolution canvas with a size-specific filename.

Use cases

Blog and documentation previews

Create consistent title cards for articles, guides, and release notes before publishing their social metadata.

Product-launch assets

Turn a launch headline, short description, and site name into a shareable PNG without opening a design application.

Template and contrast checks

Compare solid, gradient, and bold treatments while verifying automatic black-or-white text selection against brand colors.

Generating both supported aspect ratios

Export matching 1200x630 and 1200x675 variants for integrations that request different card dimensions.

Common mistakes

Mistake:Expecting the Bold template to render the description.

Fix:Bold draws only the title and optional site name. Choose Minimal or Gradient when the description must appear on the image.

Mistake:Changing the second color while using Minimal or Bold and expecting a gradient.

Fix:Only Gradient reads the second color. Minimal and Bold fill the entire canvas with the first background color.

Mistake:Entering shorthand, named, or malformed colors in the text field.

Fix:Use a complete #RRGGBB value so both the canvas fill and contrast calculation receive the six hexadecimal digits they expect.

Mistake:Expecting the generator to add a logo, photograph, custom font, or metadata tags.

Fix:This component draws text and backgrounds only and downloads a PNG. Add other artwork or the page's og:image metadata separately.

Frequently asked questions

Related guides

Designing Open Graph Social Cards: Image Dimensions, Debugging, and Tags

A complete guide to Open Graph meta tags, 1200x630 social preview images, Twitter Card validation, and debugging cache issues.

References & standards

Related tools

Aspect Ratio Calculator

Calculate dimensions and ratios for images and videos.

Border Radius Generator

Visually craft CSS border-radius values — including the advanced 8-value slash syntax for organic blob shapes — with a live preview and one-click copy.

Box Shadow Generator

Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.

CSS Grid Generator

Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.

Cubic Bezier / Easing Generator

Build a CSS cubic-bezier() timing function visually — drag control points, preview common presets, see the easing curve live, and copy the transition-timing-function CSS.

Dummy Avatar Generator

Generate unique SVG avatars for mockups and placeholders using various illustration styles