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.
Générez des modèles d'e-mails compatibles avec Gmail/Outlook. Bienvenue, promotion, notification, newsletter, réinitialisation de mot de passe. Aperçu en direct. Mise en page avec tableaux + CSS en ligne.
Ce générateur produit des modèles d'e-mails HTML compatibles avec Gmail et Outlook pour les cinq messages que chaque entreprise envoie : bienvenue, promotionnel, notification, newsletter et réinitialisation de mot de passe. Choisissez un modèle, définissez vos couleurs de marque, logo et texte, et l'outil génère du HTML basé sur des tableaux avec du CSS en ligne — l'architecture obsolète mais obligatoire qui permet aux e-mails de s'afficher correctement dans les clients de 2026, qui suppriment les balises de style et ignorent le CSS moderne. L'aperçu en direct montre les largeurs de bureau et mobile ; la sortie prête à être copiée se colle dans l'insertion HTML de Gmail, Outlook ou tout éditeur d'ESP sans casser.
Les petites entreprises envoient des campagnes professionnelles sans designer ou contrat avec une agence. Les développeurs bootstrappent les e-mails transactionnels — réinitialisations de mot de passe, notifications — avec un markup responsive et testé par les clients, au lieu de partir d'un fichier vierge. Les marketeurs prototypent des mises en page pour les parties prenantes avant de s'engager avec les modèles d'ESP. Les associations produisent des appels aux dons et des newsletters avec un budget nul. Quiconque a lutté contre le moteur de rendu d'Outlook et a perdu obtient des modèles déjà structurés pour survivre.
(1) Choisissez le type de modèle correspondant à votre objectif de message — chacun est livré avec une structure de section éprouvée : héros, corps, CTA, pied de page. (2) Personnalisez : couleurs de marque, URL de l'image du logo, titre et texte du corps, étiquettes et liens des boutons. (3) Aperçu aux largeurs de bureau et mobile — la mise en page se réorganise via des structures tolérantes aux requêtes média et des tableaux fluides. (4) Copiez le HTML pour votre ESP ou votre flux de travail de composition avec HTML dans Gmail, ou téléchargez le fichier. La sortie utilise des tableaux imbriqués et des styles en ligne tout au long, ainsi rien ne dépend des styles d'en-tête que les clients rejettent.
Parce que les clients de messagerie se sont figés en 2008. Outlook rend avec le moteur de Microsoft Word, qui ignore flexbox, grid et même le CSS de base sur lequel le web repose ; Gmail supprime les blocs <style> dans de nombreux contextes ; et chaque client applique ses propres règles pour ce qui survit. Le seul kit d'outils universellement fiable est ce qui fonctionnait il y a quinze ans : des tableaux imbriqués pour la mise en page, des attributs de style en ligne sur chaque élément, des GIF d'espacement là où les marges échouent, et des images de largeur absolue avec texte alternatif. La pratique moderne est un sous-ensemble discipliné de l'ancienne technique — largeur de conception de 600 px, empilement mono-colonne ou simple deux-colonnes sur mobile, boutons bulletproof construits à partir de cellules de tableau plutôt que de cartes d'image, et polices web-safe avec secours système. La discipline des tests complète le travail : des captures d'écran à la Litmus sur l'application Gmail, Apple Mail et Outlook desktop repèrent ce que la théorie ne voit pas. Ce générateur expédie exactement cette architecture testée au combat, qui est le point entier : vous ne devriez pas avoir à savoir pourquoi ça marche pour que ça marche.
Oui — les modèles utilisent une mise en page basée sur des tableaux, des styles en ligne et des piles de polices web-safe : la combinaison que Gmail, Outlook (moteur Word desktop), Apple Mail et les clients mobiles rendent tous de manière fiable. Le CSS moderne comme flexbox et grid est délibérément évité car Outlook desktop le supprime. Ce que vous copiez est du HTML d'e-mail de production, pas une page web collée dans un e-mail.
Les clients de messagerie sont le dernier endroit sur Internet où le markup de l'ère 2005 est la meilleure pratique : Gmail supprime les blocs <style> dans certains contextes et Outlook desktop rend via le moteur de Microsoft Word, qui ignore complètement le CSS moderne. Les tableaux pour la mise en page plus les styles sur chaque élément survivent à tous. Le générateur écrit ce dialecte pour vous afin que vous n'ayez plus jamais à insérer manuellement des styles.
Oui — chaque modèle expose des champs modifiables (nom de l'entreprise, titre, texte du corps, URL du bouton, couleurs) et régénère le HTML en direct à mesure que vous tapez. L'aperçu se met à jour en temps réel pour que vous voyiez le résultat compatible Outlook avant de copier. Vos modifications restent dans le navigateur ; rien n'est téléversé.
Copiez le HTML et collez-le dans l'éditeur HTML personnalisé de votre plateforme d'envoi — Mailchimp (bloc de code personnalisé ou importation de modèle), SendGrid, Brevo, Klaviyo, et la route de collage HTML d'Outlook/Gmail l'acceptent tous. Envoyez-vous un test d'abord : chaque client rend un peu différemment, et un envoi de test attrape les images cassées ou l'espacement avant que votre liste le fasse.
Choisissez parmi les modèles transactionnels (reçus, réinitialisations de mot de passe), marketing (newsletters, promotions) et notification (alertes, mises à jour). Chacun inclut un texte de pré-en-tête, des points de rupture mobiles responsives (empilement des colonnes en dessous de 480 px), substitutions de couleurs pour le mode sombre, et placeholders de texte alternatif. La sortie est un seul fichier HTML de moins de 100 Ko pour éviter le seuil de troncature de 102 Ko de Gmail.
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.