shadcn.io— 1,000s of shadcn/ui blocks
Skip to content

Make a Twitter card image

X still reads twitter:image (and falls back to og:image). The large card is 1200×628 — two pixels shorter than the Facebook number everyone memorized. This page locks the canvas to that size so the preview you approve is the crop X will show.

Twitter / X card · 1200×628
on this device1.91∶1

Template properties

The copy and marks on the card. Files stay on this device.

Background

Gradient or solid, then direction, grid and grain.

Gradient direction

Grid overlay
0.15

1200×628 · X summary_large_image

How it works

  1. 1Write the line you want next to the tweet preview — shorter than an OG title, because X already shows the domain and the tweet text above the card.
  2. 2Use the hero layout if you have a screenshot to drop in; keep faces and logos inside the safe zone, since X trims the rim on mobile.
  3. 3Download the 1200×628 PNG, host it, and set twitter:card=summary_large_image plus twitter:image (or reuse og:image if you only want one file).

The size, honestly

The generic 1200×630 Open Graph file is so close that most sites reuse it, and X will accept it. The two missing pixels rarely matter. What does matter is the layout: X’s large card letterboxes less than Slack and puts more weight on the image than the title. If the card is mostly type, start here; if you just need one file for every crawler, Generate an Open Graph image is the better default. Profile chrome is a different crop entirely — that is X Header Image Generator.

Canvas1200×628 px
Ratio1.91∶1
Used byX summary_large_image
ExportPNG, composed in this tab

Frequently asked questions