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.
Gere modelos de email compatíveis com Gmail/Outlook. Boas-vindas, promoções, notificações, newsletters, redefinição de senha. Visualização ao vivo. Layout de tabela + CSS inline.
Este gerador produz modelos de email HTML compatíveis com Gmail e Outlook para as cinco mensagens que toda empresa envia: boas-vindas, promocional, notificação, newsletter e redefinição de senha. Escolha um modelo, defina as cores da sua marca, logo e texto, e a ferramenta emite HTML baseado em tabelas com CSS inline — a arquitetura obsoleta mas obrigatória que faz com que o email seja renderizado corretamente em clientes de 2026, que removem tags de estilo e ignoram CSS moderno. A visualização ao vivo mostra larguras de desktop e mobile; a saída pronta para uso cola no recurso de inserir HTML do Gmail, Outlook ou qualquer editor de ESP sem quebrar.
Pequenas empresas enviam campanhas profissionais sem um designer ou um contrato com agência. Desenvolvedores criam emails transacionais — redefinição de senha, notificações — com markup responsivo e testado em clientes, em vez de começar do zero. Marketing prototipa layouts para partes interessadas antes de se comprometerem com modelos de ESP. Organizações sem fins lucrativos produzem apelos de doação e newsletters com zero orçamento. Quem já lutou com o mecanismo de renderização do Outlook e perdeu recebe modelos já estruturados para sobreviver a ele.
(1) Escolha o tipo de modelo que corresponde ao objetivo da sua mensagem — cada um vem com estrutura de seção comprovada: hero, corpo, CTA, rodapé. (2) Personalize: cores da marca, URL da imagem do logo, título e corpo do texto, rótulos e links do botão. (3) Visualize em larguras de desktop e mobile — o layout se reajusta através de estruturas tolerantes a media queries e tabelas fluidas. (4) Copie o HTML para seu ESP ou fluxo de trabalho de composição com HTML do Gmail, ou baixe o arquivo. A saída usa tabelas aninhadas e estilos inline em todo lugar, para que nada dependa dos estilos do cabeçalho que os clientes descartam.
Porque os clientes de email pararam em 2008. O Outlook renderiza com o motor do Microsoft Word, que ignora flexbox, grid e até CSS básico que a web depende; Gmail remove blocos <style> em muitos contextos; e cada cliente aplica suas próprias regras para o que sobrevive. A única ferramenta universal confiável é o que funcionava há quinze anos: tabelas aninhadas para layout, atributos de estilo inline em cada elemento, GIFs de espaçamento onde as margens falham e imagens de largura absoluta com texto alternativo. A prática moderna é um subconjunto disciplinado da técnica antiga — largura de design de 600px, empilhagem de uma única coluna ou duas colunas simples no mobile, botões bulletproof construídos a partir de células de tabela em vez de mapas de imagem, e fontes web-safe com fallbacks do sistema. A disciplina de teste completa o trabalho: capturas de tela no estilo Litmus através do app Gmail, Apple Mail e Outlook desktop pegam o que a teoria não vê. Este gerador envia exatamente essa arquitetura testada em batalha, que é o ponto inteiro: você não precisa saber por que funciona para que funcione.
Sim — os modelos usam layout baseado em tabelas, estilos inline e stacks de fontes web-safe: a combinação que Gmail, Outlook (motor Word desktop), Apple Mail e clientes mobile renderizam de forma confiável. CSS moderno como flexbox e grid é deliberadamente evitado porque o Outlook desktop remove. O que você copia é HTML de email de produção, não uma página web colada em um email.
Clientes de email são o último lugar na internet onde o markup de 2005 é a melhor prática: Gmail remove blocos <style> em alguns contextos e o Outlook desktop renderiza através do motor do Microsoft Word, que ignora CSS moderno completamente. Tabelas para layout mais estilos em cada elemento sobrevivem a todos. O gerador escreve esse dialeto para você para que você nunca precise colocar estilos inline manualmente novamente.
Sim — cada modelo expõe campos editáveis (nome da empresa, título, corpo do texto, URL do botão, cores) e regenera o HTML ao vivo enquanto você digita. A visualização atualiza em tempo real para que você veja o resultado seguro para Outlook antes de copiar. Suas edições permanecem no navegador; nada é enviado.
Copie o HTML e cole no editor de HTML personalizado de sua plataforma de envio — Mailchimp (bloco de código personalizado ou importação de modelo), SendGrid, Brevo, Klaviyo e a rota de colar HTML do Outlook/Gmail todos aceitam. Envie um teste para si primeiro: cada cliente renderiza de forma ligeiramente diferente, e um envio de teste captura imagens quebradas ou espaçamento antes que sua lista receba.
Escolha entre modelos transacionais (recibos, redefinição de senha), marketing (newsletters, promoções) e notificação (alertas, atualizações). Cada um inclui texto de pré-cabeçalho, pontos de quebra responsivos para mobile (empilhando colunas abaixo de 480px), substituições de cores para modo escuro e placeholders de texto alternativo. A saída é um único arquivo HTML inferior a 100KB para evitar o limite de corte de 102KB do 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.