Twitter / X Header Maker

About this tool

An X (Twitter) header is the rectangular banner that sits across the top of your profile, behind the profile picture. The platform displays it at 1500×500 px on desktop (verified May 2026), cropping to ~1500×420 on mobile, with the lower-left ~200 px overlapped by the profile photo. This tool gives you a live 1500×500 canvas, title and subtitle fields, a background mode switch (color / gradient / uploaded image), independent color pickers, font-size number fields, and an optional safe-zone overlay showing where the profile photo cuts in. Type your headline, drop your tagline, pick brand colors, and download a PNG matching X's spec — no signup, no watermark, no upload. Useful for personal-brand pivots, conference launches, indie-hacker bio refreshes, and anyone tired of generic templates.

Why use it

• Exact 1500×500 Output — No Manual Resize: The canvas matches X's published header spec. The PNG hits the dimensions X expects, so the platform doesn't down-scale or up-scale your file in transit.

• Live Safe-Zone Overlay: A semi-transparent dashed circle at the lower-left shows where your profile photo overlaps the header on desktop. Toggle it on while designing, off when you want a clean preview, and the export always strips it.

• Three Background Modes — Color, Gradient, Image: Solid for typography-led headers, two-stop gradient for a bolder look, image upload for photo-backed branding. Switch between them without losing your text data.

• Independent Title and Subtitle Controls: Both layers have their own font size and color picker, so you can build hierarchy (large bold headline, smaller accent subtitle) without code or templates.

• Browser-Only — Nothing Uploaded: Image uploads, canvas compositing, and PNG export all happen locally via FileReader and Canvas. No upload, no logging, no tracking pixel on the export.

• Free, Unlimited, No Watermark: Iterate on twenty headers a day if you want — no daily quota, no upsell, and the PNG carries no UtilityKit branding.

How to use

1. Type your headline into the Title field — keep it short so it reads above the profile photo on desktop.
2. Add a tagline or handle list in the Subtitle field.
3. Switch Background mode to color, gradient, or upload — colors render instantly, uploads scale-to-cover the canvas.
4. Pick brand colors using the color pickers — Color 1 doubles as the gradient start, Color 2 as the gradient end.
5. Toggle the safe-zone overlay on while editing so you avoid placing key text under the profile photo cutout.
6. Click Download PNG — the export saves as a clean 1500×500 PNG with the overlay automatically removed.

When it helps

• When relaunching your X profile after a job change and you need a header that says what you do today.
• When prepping for a conference talk or product launch and you want a header advertising the event for the next week.
• When iterating between three brand color palettes before committing the new identity to your X bio.
• When you need a non-template-looking header for an indie-hacker, designer, or developer profile that signals taste.
• When the marketing team requests a coordinated header refresh across multiple personal accounts.
• When you have a single hero photo from a product shoot and need it cropped and overlaid with copy in one step.

Examples

Tips

• Sizes verified May 2026. Check platform docs if you're seeing display issues — X has historically tweaked banner dimensions every few years.
• Keep titles under 30 characters — anything longer wraps awkwardly above the profile photo on mobile.
• Use a high-contrast title color against your background; gradient backgrounds with mid-tone colors fight legibility.
• Upload images that are already 1500×500 (or close) — the canvas covers + crops, but starting close to spec gives the cleanest result.
• PNG is fine for X uploads — JPEG can introduce banding on gradient backgrounds, so stick with PNG for posterity.

Frequently Asked Questions

Glossary

Safe zone

The area of a banner that remains visible across all device sizes and is not covered by platform UI (profile photos, name plates, reply bars). Designs should keep important text and logos inside the safe zone.

Aspect ratio

The width-to-height ratio of an image, expressed as W:H. X headers are 3:1 (1500:500), LinkedIn banners are 4:1, and Instagram stories are 9:16. Mismatched aspect ratios are auto-cropped by the platform.

DPI vs px

DPI (dots per inch) is a print concept; web platforms care only about pixel dimensions. A 1500×500 PNG at 72 DPI and 1500×500 PNG at 300 DPI are visually identical on X — only the px count matters.

Transparent zone

An area of a banner where the platform overlays UI (profile photo, name, badges) on top. Even though pixels exist there, viewers don't see them. Avoid placing text or logos inside transparent zones.

Cover-fit scaling

An image-scaling strategy that fills the canvas entirely while preserving aspect ratio, cropping the overflow. Used here when you upload a background image that doesn't match 3:1.

Two-stop gradient

A linear gradient with exactly two color stops — start color (Color 1) and end color (Color 2). The renderer uses ctx.createLinearGradient to interpolate smoothly between them across the canvas.