Free Email Template Builder

Summary

An email template builder writes the HTML of an email so you do not have to. To make one free and privately here, choose a Layout (Newsletter, Promotion or Welcome), set the Brand colour, type the header, headline, message, button and footer, check the Preview at Desktop and Mobile (375 px) width, then press Copy HTML or Download .html and paste or import it into your email service.

The builder runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). It writes a complete single-column page of tables and inline styles, 600 pixels wide at most, of about 2,300 characters for a default email. It does not send email.

Table of Use: The Three Layouts

Contrast formula: ratio = (L_light + 0.05) ÷ (L_dark + 0.05), where L = 0.2126 R + 0.7152 G + 0.0722 B with each colour channel linearised. The builder works this out for white and black text and uses the higher. Some results: the default #4f46e5 takes white text at 6.2:1, #ff6600 takes black at 7.1:1, #0ea5e9 takes black at 7.5:1 and #e11d48 takes white at 4.6:1.

Features

• Brand colour for the header band and the button, with automatic black or white text and the contrast ratio shown beside the colour.
• Preview text in a hidden block at the top, a headline, a message in which a blank line starts a new paragraph, a call-to-action button and a footer.
• Optional sections: leave Header text, Button text or the footer empty and that part is left out of the HTML.
• Safe output. Everything you type is escaped, so characters such as < and & cannot break the markup. A button link must start with https://, http://, mailto: or tel:, otherwise it points to “#” and the hint under the field turns red.
• Unsubscribe link accepts those same addresses or a merge tag such as {{unsubscribe_url}} or *|UNSUB|*.
• Preview and output. A sandboxed frame shows the same HTML at Desktop or Mobile (375 px) width. Copy HTML puts it on the clipboard, Download .html saves newsletter-email.html, promotion-email.html or welcome-email.html, and Show HTML code reveals it in a box.

Limits: no images or logos, no columns, no dark-mode styling, and nothing is saved between visits. The HTML is not tested in particular email clients, so send a test to yourself before a real send. Picking the brand colour is easier with the color picker.

How to Use the Email Template Builder

1. Under Layout, click Newsletter, Promotion or Welcome.
2. Under Header, set the Brand colour, the Header text and the Preview text.
3. Under Content, write the Headline and the Message, leaving a blank line between paragraphs.
4. Under Button, type the Button text and the Button link.
5. Write the Footer, with your postal address, and add an Unsubscribe link if you have one.
6. Check the Preview at Desktop and Mobile (375 px), then press Copy HTML or Download .html. Show HTML code displays the source.

Before you send, check the addresses on your list with the email validator, confirm the sending domain’s MX, SPF and DMARC records with the DNS lookup tool, and count the words in your message with the word counter. Set the headline in the style you prefer with the text case converter. To tidy or inspect the generated code, open it in the HTML beautifier or the HTML previewer.

Who Can Use It

Small businesses sending a monthly newsletter, shops announcing a sale, founders writing a welcome email for new sign-ups, and developers who want a dependable starting point to adapt by hand. If you add a logo yourself, shrink it first with the image compressor. For a printed letter instead of an email, use the letter generator.

FAQs

How do I make an HTML email template?

Pick a Layout (Newsletter, Promotion or Welcome), choose your Brand colour, then fill in the header, preview text, headline, message, button and footer. The preview updates as you type and is drawn from the same HTML you will get. Press Copy HTML or Download .html when you are happy with it. Nothing is installed and no account is needed.

How do I use the HTML in Gmail, Outlook or my email service?

Most email services, such as Mailchimp, Brevo or HubSpot, have a “code your own” or “paste HTML” option: paste the copied HTML there and send a test to yourself. Gmail and Outlook do not normally offer an HTML editor for ordinary messages, so a common route is to open the downloaded .html file in a browser, select the page and paste it into a new message.

Why are emails built with tables and inline styles?

Many email clients ignore or strip style sheets, and some, including desktop Outlook, use a limited rendering engine. Tables for layout and styles written on each element are the most dependable way to keep a design intact, which is why the generated HTML uses them. The email is a single column up to 600 pixels wide and shrinks on narrow screens.

What is the preview text in an email?

The preview text, or preheader, is the short line an inbox shows after the subject. The builder puts it at the top of the email in a hidden block, so it appears in the inbox list but not in the message itself. Each layout starts with a suggestion, and your own text is kept if you switch layouts.

Will my brand colour be readable?

Yes. The builder puts white or black text on your brand colour, whichever contrasts more, and shows the ratio next to the colour, for example 6.2:1 for the default indigo. Whatever colour you pick, one of the two reaches at least 4.5:1, the usual minimum for readable text, so the header and button text stay readable.

Does it add an unsubscribe link?

Yes, if you fill in Unsubscribe link: the footer gets an Unsubscribe link to that web address or to a merge tag such as {{unsubscribe_url}} or *|UNSUB|*, which your email service replaces with each subscriber’s own link. As of October 2026, Google’s email sender guidelines require senders of more than 5,000 messages a day to Gmail to support one-click unsubscribe; that is done with message headers your email service adds, not by this HTML.

Can I add images or a logo?

The builder has no image field, so the output is text, a coloured header and a button. To add a logo, edit the downloaded .html file and add an img tag with an absolute https:// address, a width and alt text. Shrink the picture first, because large images make emails slow to open on a phone.

Is anything I type uploaded?

No. The template is built by your browser and nothing is uploaded (you can check the Network tab in DevTools). The preview is drawn from the same HTML in a sandboxed frame on this page, and the tool does not send email for you. Nothing is saved either, so copy or download the HTML before you close the tab.