HTML Email Rendering Differences: Gmail vs Outlook vs Apple Mail

Why Email Rendering Is So Fragmented

If you've ever built a responsive website, you're familiar with cross-browser testing — but the differences between Chrome, Firefox, and Safari are minor compared to the rendering chasm between Gmail, Outlook, and Apple Mail. Email clients evolved in isolation, without the coordination that eventually brought browser vendors toward standards compliance. The result is a landscape where three of the most popular email clients use fundamentally different rendering engines with wildly different CSS support levels.

Understanding how each client works — and what it breaks — is prerequisite knowledge for any developer writing HTML email code.

Gmail: The CSS Stripper

Gmail serves more than 1.8 billion users and consistently ranks as the most popular email client worldwide. It's also one of the most restrictive when it comes to CSS support.

How Gmail Renders Email

Gmail strips most CSS that isn't inlined. In the web version, it removes anything in a <style> tag in the <head>. On Android, it also strips <style> blocks, meaning media queries for responsive layout won't work. It wraps all email content in its own div, which can inherit Gmail's own styles and create specificity conflicts.

What Gmail Doesn't Support

• External stylesheets: Always stripped. Inline all CSS.
• Most @media queries on Android: The Gmail Android app ignores media queries entirely on older versions.
• Web fonts via @font-face: Gmail blocks external font loading. Fallback to system fonts.
• CSS custom properties (variables): Not supported. Use literal hex/rgb values.
• CSS Grid and Flexbox: Inconsistently supported. Use table-based layouts for structural elements.
• Background images via CSS: Stripped in many contexts. Use bgcolor attribute for colored backgrounds.

Gmail Clipping

Gmail clips emails larger than 102KB with a "View entire message" link. Subscribers who don't click that link see a truncated email. Keep your HTML under 100KB by removing unnecessary whitespace, comments, and unused styles. If your email is large, consider loading images from a CDN rather than embedding them as base64 strings.

Writing for Gmail

The safest approach: inline all CSS using an inliner tool, use table-based layout for multi-column structures, avoid web fonts (specify a strong fallback stack), and test with image blocking enabled. Tools like Postdrop.io show you exactly what your email looks like in Gmail web and Gmail mobile before you send.

Outlook: The Word Processor Problem

Outlook is the most notorious email client in the developer community — and for good reason. Versions 2007 through 2019 (including Microsoft 365 on Windows) use Microsoft Word as their HTML rendering engine. Not a browser engine. A word processor.

Why Word Is a Terrible HTML Renderer

Word was designed to render formatted documents, not HTML. It treats HTML email as a document to be word-processed, which means it applies Word's own layout rules rather than following CSS specifications. The results are often catastrophic for anything beyond simple single-column text emails.

What Breaks in Outlook

• CSS floats: Completely ignored. Columns built with floats collapse into a single vertical stack.
• CSS position: Position: relative, absolute, and fixed are not reliably supported.
• Background images via CSS: Stripped entirely. You must use VML (Vector Markup Language) for background images, which is an XML format Microsoft invented in the late 1990s.
• Margin and padding on div elements: Inconsistent, often ignored. Use table cells for spacing.
• max-width: Not respected on <table> elements in some versions.
• CSS border-radius: Not supported. All rounded elements become rectangles.
• Video: <video> tags are stripped. Use a fallback image.

Outlook Conditional Comments

The standard approach for Outlook-specific fixes is conditional comments — special HTML comment syntax that only Outlook reads:

<!--[if mso]>
  <!-- Outlook-only code here -->
<![endif]-->

Use these to inject Outlook-specific table structures, VML background images, or layout overrides that would break other clients if included unconditionally.

The New Outlook (Windows 11)

Microsoft is shipping a new Outlook application for Windows 11 built on web technology rather than Word. This version has significantly better CSS support. However, the old Outlook (Word-based) remains dominant in corporate environments, so you'll need to support both for the foreseeable future.

Apple Mail: The Permissive One

Apple Mail on macOS and iOS Mail are the most standards-compliant major email clients. They use WebKit, the same rendering engine as Safari, which means they support a much wider range of modern CSS than Gmail or Outlook.

What Apple Mail Supports Well

• Web fonts: Apple Mail supports @font-face and will load custom fonts.
• CSS Grid and Flexbox: Supported and functional.
• CSS animations: Basic CSS animations work in Apple Mail.
• Background images: CSS background images render correctly.
• SVG: Inline SVG is supported.
• Media queries: Fully supported for responsive design.

Apple Mail Dark Mode

Apple Mail was one of the first clients to implement dark mode for emails. It supports the prefers-color-scheme media query and the color-scheme meta tag, giving developers control over how their email appears in dark mode. Without explicit dark mode handling, Apple Mail will forcibly invert colors, which can make your email look completely different — and often worse — than intended. Our guide on dark mode email design covers this in detail.

Apple Mail Auto-Link Detection

Apple Mail automatically detects phone numbers, dates, addresses, and certain keywords and converts them to interactive links. This can inadvertently style content you didn't intend to be interactive. Suppress this behavior where needed with x-apple-data-detectors="false" attributes.

Other Clients Worth Knowing

Yahoo Mail

Yahoo Mail strips CSS from the <head> (similar to Gmail) but supports some inline CSS that Gmail doesn't. It has unique whitespace behaviors that can add unexpected margins around table cells. Yahoo Mail also converts some URLs to tracking URLs, which can affect click data.

Samsung Mail (Android)

Samsung Mail has its own rendering quirks, including unique handling of large images and table borders. It's worth including in your test matrix given Samsung's market share in Android devices.

HEY and Basecamp

Newer email clients like HEY and the Basecamp email interface are built on modern web technology and generally render HTML email well, but they may have opinionated styling that overrides your own — particularly around typography and link colors.

The Cross-Client Testing Imperative

Given how differently these clients render the same HTML, testing across all of them is essential. The practical approach: build for the lowest common denominator (Outlook's constraints), then use conditional CSS and progressive enhancement to deliver a better experience to more capable clients.

A solid mental model for prioritization: fix Outlook first (most constraints), then Gmail (most users), then make it beautiful in Apple Mail (most permissive). Use Postdrop.io to get live previews across all three simultaneously as you build, rather than toggling between separate accounts. The real-time feedback loop dramatically reduces the number of iteration cycles before you have a cross-client solution.

Client Support Comparison Table

Feature	Gmail	Outlook 2016+	Apple Mail
CSS in <head>	Stripped	Partial	Supported
CSS Flexbox	Partial	Not supported	Supported
Web fonts	No	No	Yes
Background images (CSS)	Partial	No (use VML)	Yes
Media queries	Web: Yes, Android: No	No	Yes
Dark mode CSS	Partial	No	Yes
border-radius	Yes	No	Yes