Generate responsive HTML email templates with table-based layouts compatible with all major email clients.
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head> <body style="margin:0;padding:0;background:#f4f4f4;font-family:Arial,sans-serif;"> <table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f4;padding:20px 0;"> <tr><td align="center"> <table width="600" cellpadding="0" cellspacing="0" style="background:#ffffff;border-radius:8px;overflow:hidden;"> <tr><td style="background:#4F46E5;padding:30px;text-align:center;"> <h1 style="color:#ffffff;margin:0;font-size:24px;">Welcome to Acme Inc! 🎉</h1> </td></tr> <tr><td style="padding:30px;"> <p style="color:#333;font-size:16px;line-height:1.6;">Hi John,</p> <p style="color:#555;font-size:16px;line-height:1.6;">We're excited to have you on board! Your account is ready and waiting.</p> <table cellpadding="0" cellspacing="0" style="margin:20px auto;"><tr><td style="background:#4F46E5;border-radius:6px;"> <a href="https://example.com/dashboard" style="display:inline-block;padding:14px 28px;color:#ffffff;text-decoration:none;font-size:16px;font-weight:bold;">Get Started</a> </td></tr></table> <p style="color:#777;font-size:14px;">If the button doesn't work, copy and paste this link: <a href="https://example.com/dashboard" style="color:#4F46E5;">https://example.com/dashboard</a></p> </td></tr> <tr><td style="background:#f9f9f9;padding:20px;text-align:center;"> <p style="color:#999;font-size:12px;margin:0;">© 2026 Acme Inc. All rights reserved.</p> </td></tr> </table> </td></tr> </table> </body> </html>
Email templates use table-based layouts with inline CSS for maximum compatibility with Gmail, Outlook, Apple Mail, and Yahoo Mail. Rendering may vary by email client version.
A webpage can rely on flexbox, grid and modern CSS — but email clients render with engines frozen years in the past (Outlook on Windows even uses Word to draw HTML). So the industry-standard, bulletproof approach is what this generator outputs: a table-based layout where each section is a <table> row, every style is applied inline on the element, and a fixed 600px table centered in a full-width wrapper handles responsive scaling. Your field values are HTML-escaped before interpolation so typed quotes, ampersands and angle brackets can't break the markup or inject unexpected tags — the same reason the code avoids CSS position, flex and JavaScript entirely.
Every client reliably understands nested tables and inline styles. The outer 100% table centers the white 600px card; header, body and footer are rows inside it; the button is a padded cell containing a plain link — no flexbox, no floats, no JS.
Nina, a growth marketer, needs a '50% Off' promotional email that renders correctly for every subscriber — including the large Outlook-on-Windows segment that ignores flexbox entirely.
Generate Gmail/Outlook-compatible email templates. Everything runs locally; nothing is uploaded.
FreeToolHub HTML Email Template Generator is a free browser-based tool — generate Gmail/Outlook-compatible email templates. No signup, no upload; everything runs locally in your browser.
Erstellen Sie Gmail/Outlook-kompatible E-Mail-Vorlagen. Willkommens-, Werbe-, Benachrichtigungs-, Newsletter- und Passwort-Reset-Vorlagen. Live-Vorschau. Tabellenlayout + Inline-CSS.
Dieser Generator erzeugt Gmail- und Outlook-kompatible HTML-E-Mail-Vorlagen für die fünf Nachrichten, die jedes Unternehmen versendet: Willkommensnachricht, Werbebotschaft, Benachrichtigung, Newsletter und Passwort-Reset. Wählen Sie eine Vorlage, legen Sie Ihre Markenfarben, Logo und Text fest, und das Tool erzeugt tabellenbasiertes HTML mit Inline-CSS — die veraltete, aber obligatorische Architektur, die E-Mails korrekt in E-Mail-Clients aus dem Jahr 2026 rendert, die Style-Tags entfernen und modernes CSS ignorieren. Die Live-Vorschau zeigt Desktop- und Mobile-Breiten; die kopierfertige Ausgabe lässt sich in Gmails HTML-Einfügen, Outlook oder jeden ESP-Editor einfügen, ohne zu brechen.
Kleinunternehmen versenden professionelle Kampagnen ohne Designer oder Agenturvertrag. Entwickler starten Transaktions-E-Mails — Passwort-Resets, Benachrichtigungen — mit responsivem, client-getestetem Markup, statt von einer leeren Datei auszugehen. Marketing-Experten erstellen Layout-Prototypen für Entscheidungsträger, bevor sie sich auf ESP-Vorlagen festlegen. Non-Profit-Organisationen erstellen Spendenaufrufe und Newsletter mit null Budget. Jeder, der schon gegen Outlooks Rendering-Engine gekämpft und verloren hat, erhält Vorlagen, die bereits strukturiert sind, um es zu überstehen.
(1) Wählen Sie den Vorlagentyp, der zu Ihrem Nachrichtenziel passt — jede hat erprobte Abschnittsstrukturen: Hero, Hauptteil, CTA, Footer. (2) Anpassen: Markenfarben, Logo-URL, Überschrift und Fließtext, Button-Beschriftungen und Links. (3) Vorschau bei Desktop- und Mobile-Breiten — das Layout passt sich über medienabfrageverträgliche Strukturen und fluide Tabellen an. (4) Kopieren Sie das HTML für Ihren ESP oder den Gmail-Workflow zum Einfügen von HTML, oder laden Sie die Datei herunter. Die Ausgabe verwendet verschachtelte Tabellen und Inline-Styles durchgehend, sodass nichts von den Head-Styles abhängt, die Clients verwerfen.
Weil E-Mail-Clients im Jahr 2008 eingefroren sind. Outlook rendert mit der Microsoft-Word-Engine, die Flexbox, Grid und sogar grundlegende CSS ignoriert, auf die das Web angewiesen ist; Gmail entfernt <style>-Blöcke in vielen Kontexten; und jeder Client wendet seine eigenen Regeln an, was überlebt. Das einzige zuverlässig universelle Toolkit ist das, was vor fünfzehn Jahren funktionierte: verschachtelte Tabellen für das Layout, Inline-Style-Attribute für jedes Element, Spacer-GIFs, wo Ränder versagen, und Bilder mit absoluter Breite und Alt-Text. Die moderne Praxis ist eine disziplinierte Teilmenge der alten Technik — Designbreite von 600 px, einfache Ein- oder Zweispalten-Stapelung auf Mobilgeräten, bulletproof Buttons, die aus Tabellenzellen bestehen und nicht aus Image-Maps, und web-sichere Schriftarten mit System-Fallbacks. Die Testdisziplin vervollständigt die Arbeit: Litmus-ähnliche Screenshots über Gmail-App, Apple Mail und Outlook Desktop fangen das ein, was die Theorie verpasst. Dieser Generator liefert genau diese erprobte Architektur, was der gesamte Punkt ist: Sie sollten nicht wissen müssen, warum es funktioniert, damit es funktioniert.
Ja — Vorlagen verwenden tabellenbasiertes Layout, Inline-Styles und web-sichere Schriftstapel: die Kombination, die Gmail, Outlook (Desktop-Word-Engine), Apple Mail und Mobile-Clients alle zuverlässig rendern. Modernes CSS wie Flexbox und Grid wird absichtlich vermieden, weil Outlook Desktop es entfernt. Was Sie kopieren, ist produktionsreifes E-Mail-HTML, keine Webseite, die in eine E-Mail eingefügt wurde.
E-Mail-Clients sind der letzte Ort im Internet, wo 2005-er Markup die beste Praxis ist: Gmail entfernt <style>-Blöcke in einigen Kontexten und Outlook Desktop rendert über die Microsoft-Word-Engine, die modernes CSS komplett ignoriert. Tabellen für das Layout plus Styles auf jedem Element überleben alle. Der Generator schreibt diesen Dialekt für Sie, sodass Sie nie wieder manuell Inline-Styles schreiben müssen.
Ja — jede Vorlage bietet bearbeitbare Felder (Firmenname, Überschrift, Fließtext, Button-URL, Farben) und generiert das HTML live, während Sie tippen. Die Vorschau aktualisiert in Echtzeit, sodass Sie das Outlook-sichergebnis sehen, bevor Sie kopieren. Ihre Änderungen bleiben im Browser; nichts wird hochgeladen.
Kopieren Sie das HTML und fügen Sie es in den benutzerdefinierten HTML-Editor Ihrer Versandplattform ein — Mailchimp (benutzerdefinierter Codeblock oder Vorlagenimport), SendGrid, Brevo, Klaviyo und Outlook/Gmails HTML-Einfügen-Route akzeptieren es. Senden Sie sich zuerst einen Test: jeder Client rendert etwas anders, und ein Testversand fängt kaputte Bilder oder Abstände ab, bevor Ihre Liste sie sieht.
Wählen Sie aus transaktionalen (Quittungen, Passwort-Resets), Marketing- (Newsletter, Promotionen) und Benachrichtigungs- (Alarme, Updates) Vorlagen. Jede enthält vordefinierten Preheader-Text, responsive Mobile-Breakpoints (Spaltenstapelung unter 480 px), Dark-Mode-Farben-Überschreibungen und Alt-Text-Platzhalter. Die Ausgabe ist eine einzelne HTML-Datei unter 100 KB, um Gmails 102-KB-Kürzungsschwelle zu vermeiden.
Yes. Templates use table-based layouts, inline CSS, and MSO conditional comments specifically for Outlook 2007-2021 rendering (which uses the Word engine, not a browser). They also pass Litmus-style checks for Gmail (which strips <style> blocks), Apple Mail, and Yahoo. Width is fixed at 600px—the industry standard for email clients.
Choose from transactional (receipts, password resets), marketing (newsletters, promotions), and notification (alerts, updates) templates. Each includes a preheader text, responsive mobile breakpoints (stacking columns below 480px), dark-mode color overrides, and alt-text placeholders. Output is a single HTML file under 100KB to avoid Gmail's 102KB clipping threshold.
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.