Test HTML emails before they reach an inbox
Email clients are the least forgiving place to render HTML: Outlook for Windows still uses Microsoft Word’s engine, Gmail rewrites and trims CSS, and mobile apps invert colours in dark mode. This HTML email tester previews your email at desktop width and at a 375 px phone width, in light mode, with your prefers-color-scheme: dark rules forced on, and with the full colour inversion that Gmail and Outlook apps apply — then lists the problems most likely to break it.
The checks cover what actually causes trouble: linked stylesheets and @import (ignored nearly everywhere), <style> blocks that should be inlined, CSS that Gmail or Outlook do not support (flexbox, grid, position, border-radius in Outlook, CSS variables, background images without a fallback), images without alt text or width attributes, relative or data: image URLs, placeholder and http: links, a missing unsubscribe link and, above all, Gmail’s 102 KB clipping limit. A plain-text version is generated for the text/plain part of your message.
Your HTML is processed in your browser and shown in a sandboxed frame with scripts disabled. It is never uploaded.
How to use the HTML Email Tester
- Paste the email’s HTML into Email HTML, load an
.htmlfile, or press Sample newsletter to see a typical example with deliberate mistakes. - Switch the preview between Desktop and Mobile 375, and between Light, Dark (@media) and Dark (inverted).
- Work through Compatibility checks, sorted from errors to warnings to notes. Each item says which clients are affected and how to fix it.
- Review the Images and Links tables for missing alt text, unsized images, relative URLs,
#placeholders and non-HTTPS links. - Copy or download the Plain-text version and paste it into your email platform’s text part.
HTML Email Tester features
Gmail clipping check
The HTML size is measured in bytes against Gmail’s 102 KB limit, with a warning from 90 KB, because clipped emails hide the footer, the unsubscribe link and the open-tracking pixel.
CSS support summary
Inline styles and <style> blocks are scanned for 17 properties and features with known gaps in Gmail and Outlook for Windows, with a short fix for each, based on public caniemail.com data.
Three colour previews
Light; dark with your @media (prefers-color-scheme: dark) rules applied, as Apple Mail does; and a full invert-and-rotate, which approximates how Gmail and Outlook apps darken emails that have no dark styles.
Image and link audit
Every image and link is listed with its URL and problems: missing or empty alt, no width attribute, relative/data/cid sources, http:, javascript: and # links, or links without text.
Plain-text generator
Headings are underlined, links become “text (URL)”, image alt text is kept, hidden preheaders and styles are dropped — ready for the multipart text alternative.
What the most common warnings mean
| Warning | Affected clients | Fix |
|---|---|---|
| External stylesheet | Gmail, Outlook, Yahoo | Inline the CSS (most ESPs and build tools can do this automatically) |
| <style> block | Gmail for non-Google accounts, some Android clients, clipped emails | Inline essentials; keep the block for media queries only |
| display:flex / grid | Outlook for Windows | Use nested tables for columns |
| border-radius, box-shadow | Outlook for Windows | Accept square corners or use VML buttons |
| background-image | Outlook for Windows | Add background-color and a VML fallback |
| Image without width attribute | Outlook for Windows | Add width="…" on the <img> tag |
| Over 102 KB | Gmail (web and apps) | Minify the HTML — the HTML Minifier helps — and trim content |
Limits of a browser preview
A browser renders HTML far more generously than Outlook’s Word engine or Gmail’s sanitiser, so the preview shows what a modern client such as Apple Mail would display. The compatibility checks fill that gap by flagging the code that other clients change or ignore — but no checker replaces sending a real test to the accounts your audience uses.
The inverted dark preview is an approximation. Gmail’s iOS app, for example, only partially inverts colours, and Outlook adjusts colours according to its own contrast rules. Use it to spot logos and dark text that disappear on dark backgrounds, then confirm on a device.
A checklist before you hit send
- Hidden preheader text that adds to — rather than repeats — the subject line.
- Every image hosted on HTTPS with alt text and a width attribute; the email still makes sense with images off.
- A visible unsubscribe link and your postal address (CAN-SPAM in the US, PECR/GDPR in the UK and EU).
- HTML under 102 KB after your ESP adds tracking; check the source with the HTML Validator for unclosed tags.
- Spam-trigger wording reviewed with the email spam score checker, and the plain-text part included.
HTML Email Tester FAQ
Is this HTML email tester safe for confidential campaigns?
Yes. The analysis runs in your browser and the preview is a sandboxed frame without scripts. Nothing is uploaded. Remote images referenced by the email are loaded from their own servers, exactly as a mail client would.
Why does Gmail clip my email?
Gmail truncates messages whose HTML exceeds about 102 KB and shows a “View entire message” link. Everything after the cut — often the footer, unsubscribe link and tracking pixel — is hidden. The size shown here is the raw HTML in bytes; minify it and remove unused CSS to stay below the limit.
Should I still inline CSS in 2026?
For anything essential, yes. Gmail supports a <style> block in many cases, but not for every account type or app, and other clients strip it. Inline the base styles and use the style block for responsive media queries and dark-mode overrides.
How accurate is the dark-mode preview?
“Dark (@media)” applies your own dark styles exactly. “Dark (inverted)” mimics the forced inversion of Gmail and Outlook apps; real clients vary, so treat it as a quick check for disappearing logos and low-contrast text.
Can the email tester send a test email?
No — it does not send mail. Paste the HTML into your email platform to send tests to real Gmail, Outlook and Apple Mail accounts once the checks here are clean.
Why is “missing width attribute” a warning when my CSS sets the width?
Outlook for Windows ignores CSS width on images and displays them at their natural size, which can break a 600 px layout. A width attribute on the <img> tag is respected everywhere.