How to Send an HTML Email in Gmail (We Tested It)
Updated 7 min read
Table of contents
Gmail has no place to type HTML code, and code you paste into a new message is sent as code. To send an HTML email, open your HTML file in a web browser, select everything, copy it and paste it into a new Gmail message. Gmail keeps most of the design, but phones get the same layout as computers.
That's the right way for almost everyone, and it costs nothing. You only need an extension if you edit HTML every week. And if the email is going to a list, keep it a normal Gmail draft, because that's what keeps your personalization and tracking working. (Paste the raw code instead and your reader gets a wall of code. They won't thank you.)
Which way fits you
| You start with | Do this | You need |
|---|---|---|
| An HTML file (from a designer, a template site or an email builder) | Copy it from your browser and paste it into Gmail (below) | Gmail on a computer, any account |
| HTML you write or change often | An HTML editor extension for Gmail | Chrome on a computer |
| No HTML at all | Gmail layouts, or an email drafted in Google Docs | A Google Workspace plan with layouts, or Google Docs |
How to send an HTML email in Gmail, step by step
Step 1: Save your HTML as a .html file
If your code is in a text editor, save it with a .html extension (for example, newsletter.html). If the save window asks for an encoding, pick UTF-8, the standard for web pages. Without the .html extension, your computer won't open it as a web page.
Step 2: Open the file in your browser
Double-click the file. It opens in your default browser and shows the email the way it's meant to look. If something is off, fix the code, save and reload the page.
Step 3: Select everything and copy it
Click on the page, press Ctrl + A (Cmd + A on a Mac) to select everything, then Ctrl + C (Cmd + C) to copy it. You're copying the finished email, not the code behind it.
Step 4: Paste it into a new Gmail message
Open Gmail, click Compose and paste into the message body with Ctrl + V (Cmd + V). The compose window can be narrower than your design, so part of it may be cut off while you work. That's fine: judge the design from your test email, not from the compose window.
Step 5: Send a test to yourself first
Add a subject and send the email to your own address. Open it on your computer and on your phone before it goes to anyone else. It takes a minute, and it catches a broken image before your readers do.
What survives the paste (we tested it)
On October 13, 2026, we pasted the code of a test newsletter into Gmail's compose window in Chrome, as formatted content, and read back what Gmail kept. We didn't send it, so this is what goes into your draft.
- Came through: the tables, the colors, padding and borders written on each part of the email, the image hosted online, the links and the
{{First name}}marker. - Moved: the styles in the email's header section (the
<style>block). Gmail put them on each part of the email instead, so the email still looked the same. - Gone: the rule that switches to a different layout on phones. Phones get the same layout as computers.
- Gone: the link that loads a web font.
- Broken: an image saved on the computer. A paste can't carry a file from your computer.
So, before you copy your HTML:
- Make one layout that fits every screen. Give the main table a width of 100% and a max-width of about 600 pixels, written on the table itself, so it narrows on a phone. Max-width is on Google's list of CSS that Gmail supports.
- Host every image online and use its full web address in the code.
Two more limits apply to every email Gmail shows, pasted or not:
- Use a common font, like Arial, Helvetica or Georgia. Google's list has no entry for web fonts.
- Keep the code short. Gmail cuts off messages larger than about 102 KB and shows a "View entire message" link, according to Litmus. Images don't count toward that size, only the code.
Need a true phone layout? Google says Gmail supports media queries (the rules that switch layouts) in emails it receives, so the email has to be sent with its full code, by an email tool rather than a paste. We didn't test whether the extensions below keep those rules.
Send your HTML email to a whole list
Here's the part most guides skip. Once your HTML is in a Gmail draft, that draft can go to your whole list, with each person's own name in it.
YAMM is a mail merge add-on for Gmail and Google Sheets, and it uses a regular Gmail draft as the template. You write the email in Gmail, list your recipients in a Google Sheet, and YAMM sends each person their own copy from your Gmail account. If you don't have it yet, here's how to install YAMM.
- Add markers to your HTML file where each person's details go, before you copy it:
{{First name}}in the greeting, for example. Each marker matches a column header in your sheet. In our test, the marker came through the paste untouched. - Paste the email into a new message, as above, and close it. Leave the To field empty: YAMM fills it in from your sheet.
- In your Google Sheet, open Extensions > Yet Another Mail Merge: Mail Merge for Gmail > Start Mail Merge, select your draft and click Send test email.
- When the test looks right, send it to the list.
Two things keep it working:
- Paste the finished email, never the code as plain text. A rendered draft is what keeps YAMM's open and click tracking working.
- Fix a marker that won't fill in. If a marker shows up as
{{First name}}in your test, invisible formatting inside it is usually the cause. Select the marker in your draft, click Remove formatting in Gmail's toolbar, then restyle it if you need to.
For the full walkthrough, see our guide to sending personalized mass emails from Gmail.
When the paste isn't enough
If you write or change HTML every week, an extension saves you the save-open-copy loop. Extensions like HTML Editor for Gmail (by cloudHQ) and Insert and Send HTML with Gmail (by Designmodo) add a box for code to Gmail's compose window, so you can paste or edit HTML right there. They work in Chrome on a computer. Before you install one, read what access it asks for on its Chrome Web Store page, because it will run inside your Gmail.
No HTML at all?
If you don't have HTML and don't want to write any, you can still send a designed email. Many paid Google Workspace plans include Gmail layouts: click Layouts at the bottom of a new message and pick a design (we walk through it in our guide to newsletters from Google Sheets). Or write your email in Google Docs with Insert > Building blocks > Email draft, as in our guide to beautiful emails with Google Docs. Both give you a Gmail draft, and YAMM can send a draft from either one to your list.
Questions people ask
Can I just attach the .html file to an email?
You can, but your reader gets a file to download and open, not a designed email. To show the design inside the email, paste it into the message body as above.
Can I paste my email from Word or Google Docs instead?
It's better not to. Word and Google Docs add their own hidden markup when you copy from them, and YAMM's help center names that as a common cause of emails that arrive full of strange code. Start from your plain HTML file instead. The Google Docs email draft is different: Docs creates the Gmail draft itself, so nothing is pasted.
