HTML Email Template Builder
Generate table-based, inline-CSS HTML email templates that work in Gmail, Outlook, Apple Mail, and every major email client.
Template
Colors
Content
Leave both CTA fields empty to generate the email without a button.
You need to send a newsletter, a welcome email, and a password reset — each with your brand colors, consistent layout, and table-based HTML that survives Outlook’s Word rendering engine. Building email templates from scratch means nested <table> elements 6 levels deep, every style inlined (Outlook strips <style> tags), no <div> layout (Gmail strips display: flex), and testing across 10+ email clients. Or you can start from a proven template and customize it.
Why This Builder (Not the Email Signature Generator)
PureDevTools has an Email Signature Generator for personal email signatures appended to every email. This tool builds full email templates — newsletters, announcements, welcome emails, receipts, password resets — with multi-section layouts, header images, CTA buttons, and footer links. Both use table-based inline-CSS HTML for cross-client compatibility, but they solve different problems. Everything runs in your browser; your content never leaves your device.
What Is the HTML Email Template Builder?
The HTML Email Template Builder generates production-ready HTML email templates with table-based layouts and fully inline CSS — the two requirements that make email HTML display consistently across Gmail, Outlook, Apple Mail, Yahoo Mail, and hundreds of other email clients.
Pick a template type, customize the colors for your brand, fill in your content, and get clean HTML output with one click.
Why Table-Based Layouts?
Unlike modern web development, HTML email cannot rely on CSS flexbox, CSS grid, or most modern layout techniques. Outlook — which still uses Microsoft Word’s rendering engine — ignores these properties entirely.
Table-based layout is the industry-standard solution because <table>, <tr>, and <td> elements are supported by every email client released in the last 20 years:
| Layout technique | Web browsers | Email clients |
|---|---|---|
| CSS Flexbox | Excellent | Poor (breaks in Outlook) |
| CSS Grid | Excellent | Poor (breaks in Outlook) |
CSS position | Excellent | Unreliable |
| HTML Tables | Good | Excellent |
Why Inline CSS?
Most email clients strip <link> tags and <style> blocks entirely, or process them unreliably. Gmail, for example, strips all <style> elements from the <head>. To guarantee your styles apply, every CSS property must be written directly on the element using the style="" attribute.
This tool handles inlining automatically — you customize colors through the UI and the generator produces properly inlined CSS in the output HTML.
The Five Template Types
Newsletter
A recurring content email for subscribers. The newsletter template uses a bold header and spacious body with a single prominent call-to-action. Ideal for weekly digests, product updates, blog roundups, or any email where content is the star.
Announcement
A high-impact template for launching a product, feature, or event. Uses a warm accent color (amber by default) to create urgency and excitement. The announcement template keeps copy concise and leads directly to the CTA.
Welcome
The first email new users receive after signing up. The welcome template sets a friendly, encouraging tone with a green header (or your brand color) and body copy that guides users to their first action. First impressions matter — welcome emails have the highest open rates of any email type.
Receipt / Invoice
A transactional email confirming a purchase or payment. Uses a professional dark header and structured body for itemized content. Receipt emails are sent programmatically and must be scannable — users look for order number, items, and total.
Password Reset
A critical security email that must be instantly recognizable as legitimate. The password-reset template uses a distinct accent color (purple by default), clear security language, and a single unambiguous CTA button. Never embed links in paragraph text for security emails.
Content Sections Explained
Header Text
The large title displayed in the header banner. Keep it short (3–6 words). Email clients often show the subject line and header text together in the inbox preview.
Preheader Text
The secondary preview text that appears in the inbox after the subject line. Most email clients show 40–100 characters of preheader. This field is rendered as hidden text at the very top of the email body — invisible in the email itself but visible in the inbox list.
Example of what subscribers see:
Subject: Your Order Has Been Confirmed
Preview: Thank you for your purchase! Your order #12345...Body Text
The main message. Use blank lines between paragraphs — the generator converts double newlines into separate <p> elements, single newlines into <br> tags.
CTA Button Text and URL
The call-to-action button. Use action-oriented text: “Get Started”, “View Order”, “Reset Password”, “Read More”. Both fields are required for the button to appear in the output. Leave both blank to render the email without a CTA button.
Footer Text
Typically contains legal text, unsubscribe links, and the company address. CAN-SPAM (US) and GDPR (EU) require commercial emails to include a physical mailing address and a way to unsubscribe. Use newlines to separate lines.
Color Customization
All six color fields accept standard 3-digit (#fff) or 6-digit (#ffffff) hexadecimal colors:
| Field | Where it appears |
|---|---|
| Header background | Banner behind the header text |
| Header text | Title text in the header banner |
| Body background | Background behind the body and footer content |
| Body text | Paragraph text color |
| Button background | CTA button fill color |
| Button text | Text on the CTA button |
| Link color | Anchor tag color in the footer |
| Footer background | Background behind the footer |
| Footer text | Footer paragraph text color |
Use your brand’s primary color for the header and button to make the email immediately recognizable as yours.
Email Client Compatibility
The generated HTML is tested against the following rendering environments:
| Client | Support |
|---|---|
| Gmail (web, Android, iOS) | Full |
| Outlook 2016/2019/365 (Windows) | Full |
| Outlook for Mac | Full |
| Apple Mail (macOS, iOS) | Full |
| Yahoo Mail | Full |
| Samsung Mail | Full |
| Thunderbird | Full |
Outlook on Windows uses the Word rendering engine, which has the most restricted CSS support. The generator uses MSO conditional comments (<!--[if mso]>) and bgcolor attributes in addition to CSS background-color to ensure Outlook compatibility.
Using the Output with an Email Service Provider
The generated HTML is ready to paste into any ESP:
- Mailchimp: Code → Paste in your HTML
- SendGrid: Dynamic Templates → Code editor → Paste HTML
- Postmark: Templates → New Template → HTML body
- Amazon SES: Send email → Raw message → HTML part
- Resend: React Email or raw HTML via API
- Brevo (Sendinblue): Design → Code editor
Always send a test email before deploying. The generated HTML renders correctly across clients, but your ESP may wrap the body in additional markup.
Frequently Asked Questions
Why does my email look different in Outlook?
Outlook on Windows uses Microsoft Word as its HTML rendering engine. Word does not support many CSS properties including border-radius, max-width, box-shadow, and CSS shorthand. This generator targets the lowest common denominator — every style property used is supported by Outlook 2016 and later.
Can I add images?
The generator produces a text and button layout. To add images, insert <img> tags in the body HTML after copying the output. Always set explicit width and height attributes on images, use border="0", and host images on a public URL (not base64 inline). Many spam filters penalize emails with large base64 images.
What is a preheader and do I need one?
A preheader is hidden preview text that appears in the inbox after the subject line. It significantly impacts open rates because it gives subscribers additional context before opening. Always include a preheader that complements (not repeats) the subject line.
Is the output mobile-responsive?
Yes. The template uses a fluid max-width: 600px container with a media query that makes the layout 100% wide on screens below 620px. Font sizes are set in pixels with line-height values that remain readable on all screen sizes.
Do I need to include an unsubscribe link?
For commercial emails, yes. CAN-SPAM (US) and GDPR (EU/UK) legally require a way to opt out of marketing emails. Place unsubscribe text in the footer. Transactional emails (receipts, password resets) are exempt from this requirement.
Is my data sent to a server?
No. All HTML generation happens entirely in your browser using JavaScript. No email content, colors, or URLs are sent to any server. Your template content stays completely private.