Free HTML Email Preview Tool

Why Email Rendering Varies Across Clients and Devices

Email HTML isn't rendered by a web browser. Each email client has its own HTML and CSS engine, with its own list of what it supports.

• Gmail supports <style> blocks with limits and drops them in some cases, so inline styles are still the safe default.
• Classic Outlook for Windows renders with Microsoft Word's engine, which has the weakest CSS support of the big clients.
• Apple Mail is the most permissive and handles modern CSS well.

What breaks most often

An email that looks perfect in a browser often breaks in at least one client:

• flex, grid and calc() aren't reliable in email.
• Media queries work in many clients but not in classic Outlook.
• Background images are blocked or dropped by some clients.

Why screen size matters too

A layout that looks right at 1440px can overlap or overflow at 375px. A large share of opens happen on phones, so a layout that only works on desktop is broken for many of your readers.

Which Email Clients to Test First

Test where your readers actually open. In public market-share reports, Apple Mail and Gmail are the two biggest email clients, followed by Outlook.

B2B and cold email

Give Outlook on Windows extra weight. Your recipients are more likely to work in companies where Outlook is the standard client.

Its quirks with margins, padding and images make it the client most likely to break a layout that wasn't built for email.

Newsletters and B2C

Mobile comes first. Most of your opens will be on iOS or Android mail apps.

• Start with a 375px preview (iPhone SE and mini width).
• Then check 390px and 414px, two other common phone widths.
• If the reader has to scroll sideways, or text runs off the screen, the email is broken for them.

Dark Mode Email Rendering

When a reader has dark mode on, some email clients change the colors of your email to match. Each client does it differently:

• Apple Mail leaves emails that set their own colors as they are, darkens plain ones, and supports a dark design through CSS.
• Outlook apps partly invert: light backgrounds get darker and text colors are adjusted.
• Gmail fully inverts colors in its iOS app, partly on Android, and leaves them alone on the web.

What goes wrong

• Logos with a transparent background can disappear against a dark background.
• Dark text on a color the client didn't change can become unreadable.
• Brand colors end up in combinations you never designed.

How to handle it

Use @media (prefers-color-scheme: dark) for clients that support it, and set explicit light and dark values for your key colors. This tool's dark mode is a simulation (it inverts colors), so check real clients before a big send.

A Pre-Send Email QA Checklist

The visual preview is one step in a pre-send check. Before every send, go through this list:

• Subject line tested for length (try the subject line tester).
• Preview text set to something useful, not "View this email in your browser".
• Personalisation tokens have fallback values.
• Links tested and pointing to the right pages.
• Unsubscribe link present and working.
• SPF, DKIM and DMARC in place for your sending domain (start with the SPF record generator).
• The right segment of your list selected.

HTML checks

• Alt text on every image, and the email still makes sense with images off.
• Text readable at 600px and 375px.
• Body text at least 14px, headings 18px or more on mobile.
• Buttons and links at least 44 by 44px so they're easy to tap.

Why preview every time

A broken layout is invisible in the HTML source. Collapsed columns, invisible text or a broken image only show up when the email is rendered.

Preview every email before it goes out, even a template you've sent before: a small edit can break the layout. If you're unsure whether to design the email at all, read plain text vs HTML email.