Build production-ready HTML email templates with inline CSS. Compatible with Gmail, Outlook, and Apple Mail.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
<title>Welcome to Acme Inc!</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
body,table,td,a{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
table,td{mso-table-lspace:0;mso-table-rspace:0}
img{-ms-interpolation-mode:bicubic;border:0;height:auto;line-height:100%;outline:none;text-decoration:none}
body{margin:0;padding:0;width:100%!important;height:100%!important}
@media only screen and (max-width:620px){
.email-container{width:100%!important;max-width:100%!important}
.fluid{max-width:100%!important;height:auto!important}
.stack-column{display:block!important;width:100%!important}
.p-20{padding:20px!important}
}
</style>
</head>
<body style="margin:0;padding:0;background-color:#f4f4f7;font-family:Arial,Helvetica,sans-serif;">
<!-- Preheader (hidden text for email clients) -->
<div style="display:none;font-size:1px;color:#f4f4f7;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">
Welcome to Acme Inc!
</div>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color:#f4f4f7;">
<tr>
<td align="center" style="padding:20px 10px;">
<!-- Email Container -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" class="email-container" style="max-width:600px;width:100%;">
<!-- Logo / Company Name -->
<tr>
<td align="center" style="padding:30px 0 20px 0;">
<h2 style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:22px;font-weight:700;color:#4F46E5;">Acme Inc</h2>
</td>
</tr>
<!-- Main Card -->
<tr>
<td>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color:#ffffff;border-radius:8px;overflow:hidden;">
<!-- Header Bar -->
<tr>
<td style="background-color:#4F46E5;padding:4px 0;font-size:0;line-height:0;"> </td>
</tr>
<!-- Content -->
<tr>
<td class="p-20" style="padding:40px 40px 20px 40px;">
<h1 style="margin:0 0 20px 0;font-family:Arial,Helvetica,sans-serif;font-size:24px;font-weight:700;color:#333333;line-height:1.3;">
Welcome to Acme Inc!
</h1>
<div style="font-family:Arial,Helvetica,sans-serif;font-size:15px;color:#555555;">
<p style="margin:0 0 10px 0;line-height:1.6;">We're thrilled to have you on board. Your account has been created and you're all set to get started.</p>
<br>
<p style="margin:0 0 10px 0;line-height:1.6;">Explore our features and let us know if you need any help along the way.</p>
</div>
</td>
</tr>
<!-- CTA Button -->
<tr>
<td style="padding:10px 40px 40px 40px;" align="center">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="border-radius:6px;background-color:#4F46E5;">
<a href="https://example.com/dashboard" target="_blank" style="display:inline-block;padding:14px 32px;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:600;color:#ffffff;text-decoration:none;border-radius:6px;background-color:#4F46E5;">
Get Started
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:30px 20px;text-align:center;">
<p style="margin:0 0 8px 0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#999999;line-height:1.5;">
You received this email because you signed up for an account.
</p>
<p style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#999999;">
© 2026 Acme Inc. All rights reserved.
</p>
<p style="margin:8px 0 0 0;font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#bbbbbb;">
<a href="https://example.com/dashboard" style="color:#bbbbbb;text-decoration:underline;">Unsubscribe</a> |
<a href="https://example.com/dashboard" style="color:#bbbbbb;text-decoration:underline;">Preferences</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>The Email Template Builder generates production-ready, responsive HTML email markup that renders reliably across Gmail, Outlook, Apple Mail, and mobile clients. It uses the table-based, inline-CSS layout approach that email clients require, so you get a single self-contained HTML file you can paste straight into your ESP, SMTP send, or transactional email API.
It is built for developers, marketers, and product teams who need onboarding, password-reset, receipt, or newsletter emails without hand-writing nested tables and inline styles. You configure content blocks, a call-to-action button, colors, and preheader text, then export clean HTML ready to drop into SendGrid, Mailgun, Amazon SES, or any SMTP pipeline.
Email clients do not support modern CSS the way browsers do. Outlook renders with Microsoft Word's HTML engine, and Gmail strips out <style> blocks and external stylesheets in many contexts. To survive this, robust email HTML relies on nested <table> elements for layout and CSS declared inline on each element (for example style="color:#333333;font-size:16px;"). This builder outputs exactly that structure, so styling travels with the markup rather than depending on a stylesheet the client may discard.
The generated template wraps everything in a fixed-width outer table, usually 600 pixels, centered inside a full-width background table. Responsive behavior is handled with a media query in the <head> for clients that honor it, while the base layout stays fluid enough to degrade gracefully where media queries are ignored. Web-safe font stacks (Arial, Helvetica, sans-serif) are used with fallbacks because custom web fonts are unreliable in email.
The preheader is placed as hidden text at the top of the body using a zero-height, hidden span so it feeds the inbox preview without appearing in the visible email. The output is a single self-contained HTML document with no external image or CSS dependencies beyond the image URLs you supply, which keeps it portable across any sending platform.
Yes. The output uses table-based layout and inline CSS, which is the approach Outlook's Word-based rendering engine supports. Buttons use the bulletproof VML/table technique so they render as solid blocks rather than collapsing in Outlook.
Major email clients, especially Outlook and older Gmail contexts, do not reliably support flexbox, grid, or floated divs. Tables are the only layout mechanism that renders consistently across every client, which is why professional email HTML still uses them.
Yes. Copy the exported HTML into the html body field of any transactional API such as SendGrid, Mailgun, Amazon SES, or Postmark, or send it directly over SMTP. The markup is self-contained and does not require additional assets.
The preheader is the short preview snippet inboxes show next to or below the subject line. This tool inserts it as hidden text at the top of the email so you control that preview instead of letting the client pull the first visible words.
No. Email HTML references images by absolute URL, so you host images on your server or CDN and paste the links into the builder. Most clients block images by default until the recipient opts in, so always set meaningful alt text.
Yes, it is completely free and runs entirely in your browser. The template content, colors, and links you enter are processed client-side and are not uploaded to or stored on any server.
Use the built-in desktop and mobile preview, then send a test to your own address through your ESP or an SMTP tester. For deliverability checks, verify recipient addresses first with an email validator.