Loading page
About this tool
Design newsletter headers at real email widths, export at 2x for retina and check how they read on light and dark clients.
Email Newsletter Banner Maker designs a header at a real email content width — 560, 600 or 640 CSS pixels — and exports it at 2x so it stays sharp on retina screens while the width attribute keeps the layout at 1x. It also scores the banner against a light and a dark client canvas, because email clients do not invert image pixels: a white header stays white and glares inside a dark-mode message. Built for newsletter writers and marketers who need a header that survives Gmail, Outlook and Apple Mail without a design tool.
Open Email Newsletter Banner Maker on AltFTool — it loads instantly in your browser.
Paste or type the text you're working with.
Choose how it should be transformed or analyzed.
Copy the finished text into your document or post.
Draws at 2x and gives you the 1x width and height to declare, so clients downsample instead of upscaling.
Reports the contrast between your banner background and both the light and dark client canvases.
Outputs an image tag with display:block, width:100% and max-width so it scales on mobile and does not gap in Outlook.
600 CSS pixels wide is the safe standard, with a height of 150-300 px depending on the proportion you want. Export the image at 2x — 1200 px wide for a 600 px banner — and set width="600" in the markup.
Because the image is being upscaled. Phones have 2x or 3x pixel density, so a 600 px image displayed at 600 CSS pixels is stretched. Export at double the CSS size and declare the CSS size in the width attribute.
Avoid a white or near-white background, because clients do not invert image pixels and it will glow inside a dark message. A mid-tone or dark background with light text reads well in both modes; matching the banner background to your email's container colour hides the seam entirely.
Gmail clips a message once its HTML part passes about 102 KB and hides the rest behind a "View entire message" link. Images are fetched separately and do not count, so the fix is trimming inline CSS and repeated table markup, not the banner.