- Home
- Guides
- Google Workspace
- How to send an HTML email in Gmail: two free methods
How to send an HTML email in Gmail: two free methods
Send a designed HTML email from a normal Gmail account, either by pasting your code into the compose window with the browser's developer tools or with a free HTML editor extension.
By Nur Islam- 4:48 video
- 6 steps
- 53.2K views
Jump to a step (6)
Gmail's compose window has no way to paste HTML code, so small businesses that want a branded announcement or promotion usually pay for an email marketing service. For a one-off message to a few people, that is more tool than you need.
Method one uses the browser's Inspect tool to replace the compose window's body with your own HTML. Method two uses a free extension that adds an Edit as HTML button to Gmail. Both send a normal Gmail message that renders on desktop and phone.
Gmail is strict about what HTML it accepts, so the code has to follow a few rules first.
What you need
- A Gmail or Google Workspace account
- A desktop browser such as Chrome, Edge, Safari or Firefox
- The HTML code for your email, wrapped in a div with inline CSS
Step by step
0 of 6 done-
01
Prepare Gmail-friendly HTML
Write or generate your email HTML. ChatGPT or other free tools can create it from a few prompts. Follow these rules:
- Do not include
<html>,<head>,<title>or<body>tags. Wrap everything in a<div>instead, or Gmail will not send it. - Use inline CSS only. External stylesheets are not supported.
- Use fonts Gmail already has. Web fonts are not supported.
- Host images online (for example a free stock site like Pixabay or a shared Google Drive image) and link to them.
- Do not include
-
02
Open the compose window and inspect the body
In Gmail, select Compose. Right-click inside the message body and select Inspect. The developer tools open at the side or bottom of the window. You can move them to the bottom with the Dock to bottom option.
-
03
Replace the body with your HTML
In the developer tools, right-click the highlighted element (the email body) and choose Edit as HTML. Select all the existing code and delete it. Paste your HTML, then click outside the edit box. The compose window now shows your designed email.
-
04
Add a subject and recipient and send
Close the developer tools. Add the subject and recipient and select Send. In the video the email arrives with the header, image and button intact and is responsive on a phone.
-
05
Or use a free HTML editor extension
Install the Free HTML Editor for Gmail by cloudHQ extension. In a new compose window, select Edit as HTML. The editor can insert tables, images, buttons and videos. To use existing code, select Source, delete the placeholder code and paste yours. Preview it on the right, then select Close editor and send.
-
06
Start from a ready-made template
For a head start, install the Gmail Email Templates by cloudHQ extension. It offers hundreds of free templates you can insert into the compose window and edit.
Tips and common problems
- If Gmail refuses to send or strips your design, check for
<html>,<head>,<title>or<body>tags and remove them. - Put all CSS inline on each element. Gmail ignores external stylesheets.
- Images must be hosted online and linked. Local image files will not show.
- Test by sending to yourself and checking on both desktop and phone before sending to others.
Send it to a list
To send a personalized HTML email to many people from a Google Sheet, watch how to send newsletter emails with Gmail and Google Sheets.
Questions
Can you send HTML emails from Gmail?
Yes, but not directly from the compose box. Paste your HTML through the browser's Inspect tool using Edit as HTML, or use a free extension that adds an HTML editor to Gmail.
Why isn't my HTML email working in Gmail?
The most common causes are full-page tags like html, head or body, external CSS, custom web fonts and images that are not hosted online. Wrap the code in a div, use inline CSS and link hosted images.
How do I send an HTML email to a list of people from Gmail?
Combine this with Google Sheets to send the same HTML email to each person separately. The follow-up video linked below shows how.
