LinkedIn Banner Generator - 1584×396
Type a headline, pick a background, download the PNG. Built to 1584×396, the size LinkedIn's own help center recommends, 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.
LinkedIn calls this your profile's background photo - the wide image that sits behind your profile picture at the top of the page. LinkedIn's own help center lists 1584×396 pixels, a 4:1 ratio, as the recommended size, under 8MB, as a JPG or PNG. This generator builds to exactly that. Type your headline, pick a background, and the canvas above renders the finished banner, with the title auto-shrinking and wrapping to fit.
LinkedIn's guidance stops at the pixel size - it does not publish an exact crop or safe-area spec, only that how the image appears can shift with browser window size and screen resolution. Treat the outer edges as breathing room rather than a hard boundary: this generator already centers and pads the headline block rather than running text to the corners, so the copy stays clear across that variation.
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 posting this to X or need a preview card for shared links? Those are different sizes and different pages: the X Header Generator (1500×500) and the OG Image Generator (1200×630) use the same controls.
Questions this tool gets asked
What size should a LinkedIn banner be?
1584×396 pixels, a 4:1 ratio. That figure comes straight from LinkedIn's own help center article on changing your profile background photo. Files need to be JPG or PNG and under 8MB.
How do I upload my new banner to LinkedIn?
Open your profile, click the pencil/camera icon on your current background photo, and upload the PNG this page downloads. LinkedIn handles the actual upload; this page only builds the file.
Is this the same size as a LinkedIn Company Page cover photo?
No. This generator is built for the personal profile background photo at 1584×396. Company Page covers use a different upload size - check LinkedIn's current help documentation before reusing a personal-profile file there.
Is this LinkedIn banner 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.
I also need an X header or an Open Graph image - same tool?
Same controls, different pages built to the right size each: the X Header Generator (1500×500) 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 1584x396 - 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 banner, 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.