X Header Generator - 1500×500
Type a headline, pick a background, download the PNG. Built to 1500×500, the size an X profile header displays, live on a canvas in this tab.
Local onlyEverything on this page - the preview, the randomness, and every file you download - is generated by JavaScript in this tab. Nothing you type, pick, or upload is transmitted, and the page keeps working offline.
The header on an X profile is the wide banner image behind your profile photo and bio - a different job from your avatar, and a different ratio from a shared-link preview card. This generator builds it at 1500×500, the size the site's own upload flow asks for. Type your headline, pick a background, and the canvas above renders the finished banner, with the title auto-shrinking and wrapping to fit.
The background styles come from the same geometry engines as the rest of ShapeKiln - the mesh option gives you a soft multi-color field that makes plain text look designed. Everything renders in this tab: the headline, your logo, and the exported PNG never touch a server, and there is no watermark, account, or per-image fee.
Also need a preview card for shared links, or a LinkedIn background photo? Those are different sizes and different pages: the OG Image Generator (1200×630) and the LinkedIn Banner Generator (1584×396) use the same controls.
Questions this tool gets asked
What size should an X (Twitter) header be?
1500×500 pixels is the size X's own profile upload asks for. This generator renders at exactly that, with your headline auto-fit to the width.
How do I upload my new header to X?
Open your profile, click Edit profile, and use the header image control to upload the PNG this page downloads. X handles the actual upload; this page only builds the file.
Is this X header generator free?
Yes - free, no watermark, no signup, no image limit. The page is supported by ads. The banner is drawn on a canvas in your own browser, so generating a thousand images costs us the same as generating one.
Does my headline or logo get uploaded anywhere?
No. Text is drawn onto a local canvas element and your logo file is read directly into memory in this tab. The PNG is assembled and downloaded entirely on your machine; nothing is transmitted.
Can I reuse my OG image as my X header instead?
You can, but a 1200×630 image is a different ratio than 1500×500 and will get cropped or letterboxed rather than filling the header. Building it at 1500×500 directly on this page avoids that.
I also need a LinkedIn banner or an Open Graph image - same tool?
Same controls, different pages built to the right size each: the LinkedIn Banner Generator (1584×396) and the OG Image Generator (1200×630).
Method
- Algorithm
- Canvas 2D drawing with four background modes: flat fill; a corner-to-corner linear gradient (
ctx.createLinearGradient(0,0,w,h)); a "mesh" background of stacked radial gradients, one per accent color, each placed at a mulberry32-seeded position and radius; and an "edge" background, one radial gradient anchored at the top-right corner plus a flat linear-gradient bar along the bottom edge. Title text auto-shrinks in a step-down loop and word-wraps to at most 3 lines; ink color (light or dark) is chosen from the base color's relative luminance. One engine serves all three banner pages, with this page's size pinned by its markup. File:og-image.js:28-147(mesh block 50-60, edge block 61-74, luminance 31-34, text-fit loop 114-121). - Determinism
- Output is a pure function of its controls for the solid, linear, and edge backgrounds. The mesh background draws from
mulberry32(seed)(og-image.js:49); with the mesh background selected, the same seed and controls reproduce the same card exactly. - Export
- PNG only, at this page's fixed 1500x500 - the size is pinned in the page markup and read once at load (
og-image.js:10), and the download always renders at those full pixel dimensions regardless of the preview scale (og-image.js:181-185). That is far below every browser's canvas pixel cap (Chrome/Firefox ~268 million px total, Safari ~5.24 million, iOS ~4096 per side) - there is no risk of the silent-failure ceiling here. This is a screen-resolution profile header, not a print file: browsers expose no CMYK color space at all, so nothing exported here can be truthfully called print-ready. - Licence
- Output is the user's to use for anything, including commercial work, with no attribution required.