OG Image Maker

Generate OG images
with URL parameters

A free tool that creates 1200×630 Open Graph images from a title, background type, and a few URL query parameters.

Sample image generated with OG Image Maker

Features

Why use it

Just paste a URL

Copy the URL from the editor and set it as the og:image. No need to download and upload an image file for every page.

26 backgrounds to choose from

Pick from 26 background variations across Pattern, Geometry, and Gradient categories.

Tune colors to your site

Switch between light and dark modes, then adjust hue, chroma, and lightness to match your brand color.

Cached for fast repeat loads

Generated images are cached for a period of time, so subsequent loads are instant.

Free

Free to use

No login required. Open the editor and start right away.

Gallery

Background variations

Switch colors and layout to preview how each variation looks.

Sample OG image for 2-1 · Lit Slope
2-1 · Lit Slope
Sample OG image for 2-2 · Diagonal Accent
2-2 · Diagonal Accent
Sample OG image for 2-3 · Extruded Circle
2-3 · Extruded Circle
Sample OG image for 2-4 · Layered Waves
2-4 · Layered Waves
Sample OG image for 2-5 · Drift Triangles
2-5 · Drift Triangles
Sample OG image for 2-6 · Code Panel
2-6 · Code Panel
Sample OG image for 2-7 · Corner Grid
2-7 · Corner Grid
Sample OG image for 2-8 · Accent Dot Grid
2-8 · Accent Dot Grid
Sample OG image for 2-9 · Circuit Trace
2-9 · Circuit Trace
Sample OG image for 2-10 · Data Bars
2-10 · Data Bars
Sample OG image for 2-11 · Concentric Ripple
2-11 · Concentric Ripple
Sample OG image for 3-1 · Layered Lines
3-1 · Layered Lines
Sample OG image for 3-2 · Layered Contour
3-2 · Layered Contour
Sample OG image for 3-3 · Pale Duotone Grid
3-3 · Pale Duotone Grid
Sample OG image for 3-4 · Polygon Mesh
3-4 · Polygon Mesh
Sample OG image for 3-5 · Calm Glow
3-5 · Calm Glow
Sample OG image for 3-6 · Aurora Glow
3-6 · Aurora Glow
Sample OG image for 3-7 · Pastel Bloom
3-7 · Pastel Bloom
Sample OG image for 3-8 · Spectrum Slice
3-8 · Spectrum Slice

This is just a sample of the available variations.

How to use

Get started in 3 steps

Step 1

Choose a background in the editor

Open the editor, then choose a background from the Pattern, Geometry, or Gradient card list.

Step 2

Tune the look in the settings panel

Use the settings panel to adjust text alignment, color, and background effects. Edits apply instantly to the selected card, with sample content so you can preview the final look.

Step 3

Copy the URL and set it as the og:image

Copy the API URL with the "Copy URL" button at the bottom of the settings panel. Replace YOUR_TITLE_HERE/HEAD_META/FOOT_META with your real text, then set the URL as your page's og:image.
Alternatively, you can download the image. Please note that titles and other information will not be included in the output unless you have explicitly entered them. It is also possible to download only the background and use it in your own product.

Copy URL and download buttons in the editor

FAQ

Frequently asked questions