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.
Genera plantillas de email compatibles con Gmail/Outlook. Bienvenida, promoción, notificación, newsletter y restablecimiento de contraseña. Vista previa en vivo. Maquetación de tablas + CSS inline.
Este generador produce plantillas de email HTML compatibles con Gmail y Outlook para los cinco mensajes que toda empresa envía: bienvenida, promocional, notificación, boletín y restablecimiento de contraseña. Elige una plantilla, configura los colores de tu marca, el logotipo y los textos, y la herramienta emite HTML basado en tablas con CSS inline: la arquitectura obsoleta pero obligatoria que hace que el email se renderice correctamente en clientes de 2026, que eliminan las etiquetas style e ignoran el CSS moderno. La vista previa en vivo muestra anchos de escritorio y móvil; la salida lista para copiar se pega en el insertador HTML de Gmail, en Outlook o en cualquier editor de ESP sin romperse.
Los pequeños negocios envían campañas profesionales sin diseñador ni agencia con tarifa mensual. Los desarrolladores arrancan emails transaccionales —restablecimientos de contraseña, notificaciones— con marcado responsive ya probado en clientes en lugar de partir de un archivo en blanco. Los marketers prototipan maquetas para los interesados antes de comprometerse con plantillas de ESP. Las organizaciones sin ánimo de lucro producen llamado a donaciones y boletines con presupuesto cero. Y cualquiera que haya luchado contra el motor de renderizado de Outlook y perdido obtiene plantillas ya estructuradas para sobrevivirlo.
(1) Elige el tipo de plantilla que se ajuste al objetivo de tu mensaje: cada una viene con una estructura de secciones probada: hero, cuerpo, CTA, pie. (2) Personaliza: colores de marca, URL del logotipo, titular y cuerpo, etiquetas de botón y enlaces. (3) Previsualiza a anchos de escritorio y móvil: la maqueta se reconfigura mediante estructuras tolerantes a media queries y tablas fluidas. (4) Copia el HTML para tu ESP o flujo de redactar-con-HTML de Gmail, o descarga el archivo. La salida usa tablas anidadas y estilos inline en todo momento, así que nada depende de los estilos de head que los clientes descartan.
Porque los clientes de correo se congelaron en 2008. Outlook renderiza con el motor de Microsoft Word, que ignora flexbox, grid e incluso el CSS básico del que depende la web; Gmail elimina los bloques <style> en muchos contextos; y cada cliente aplica sus propias reglas sobre qué sobrevive. El único conjunto de herramientas universalmente fiable es el que funcionaba hace quince años: tablas anidadas para el diseño, atributos style inline en cada elemento, GIFs de espaciado donde los márgenes fallan, y imágenes de ancho absoluto con texto alt. La práctica moderna es un subconjunto disciplinado de la técnica antigua: ancho de diseño de 600px, una columna o un apilado simple de dos columnas en móvil, botones a prueba de todo construidos con celdas de tabla en lugar de image maps, y fuentes web-safe con reservas del sistema. La disciplina de pruebas completa el trabajo: capturas tipo Litmus en la app de Gmail, Apple Mail y Outlook de escritorio capturan lo que la teoría no alcanza. Esta generadora envía exactamente esa arquitectura probada en combate, que es el punto entero: no deberías tener que saber por qué funciona para que funcione.
Sí: las plantillas usan diseño basado en tablas, estilos inline y pilas de fuentes web-safe, la combinación que Gmail, Outlook (motor de Word de escritorio), Apple Mail y los clientes móviles renderizan de forma fiable. El CSS moderno como flexbox y grid se evita a propósito porque Outlook de escritorio los elimina. Lo que copias es HTML de email de calidad de producción, no una página web pegada en un email.
Los clientes de email son el último lugar de internet donde el marcado de la era 2005 es buena práctica: Gmail elimina los bloques <style> en algunos contextos y Outlook de escritorio renderiza a través del motor de Microsoft Word, que ignora por completo el CSS moderno. Tablas para el diseño más estilos en cada elemento sobreviven a todos. La generadora escribe ese dialecto por ti para que nunca más styles inline a mano.
Sí: cada plantilla expone campos editables (nombre de empresa, titular, cuerpo, URL del botón, colores) y regenera el HTML en vivo mientras escribes. La vista previa se actualiza en tiempo real, así que ves el resultado seguro para Outlook antes de copiar. Tus ediciones se quedan en el navegador; no se sube nada.
Copia el HTML y pégalo en el editor de HTML personalizado de tu plataforma de envío: Mailchimp (bloque de código personalizado o importación de plantilla), SendGrid, Brevo, Klaviyo y la ruta de pegar-HTML de Outlook/Gmail lo aceptan. Envíate primero una prueba: cada cliente renderiza algo distinto, y un envío de prueba atrapa imágenes rotas o espaciados antes de que lo haga tu lista.
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.