The Complete Guide to Email Client Rendering Differences in 2026

If you've ever sent a perfectly crafted HTML email only to discover it looks like abstract art in Outlook, you're not alone. Every email client renders HTML and CSS differently, and in 2026 the landscape is more fragmented than ever.

This guide covers what actually works (and what breaks) across Gmail, Outlook, Apple Mail, Yahoo Mail, and Samsung Mail, with specific CSS support data, dark mode behaviour, and the workarounds that actually solve these problems.

---

The Core Problem: There Is No Standard

Web browsers have largely converged on standards. Email clients have not.

The reason is simple: email clients are not browsers. Gmail renders your HTML inside its own DOM and aggressively sanitises your CSS. Outlook desktop uses Microsoft Word's HTML engine to render emails. Apple Mail uses WebKit. Yahoo Mail has its own quirks that have persisted for years.

The result is that an email with perfectly valid HTML and CSS will render differently across every client. There is no "write once, render everywhere" for email.

Here's the current state of play.

---

Gmail: The Strict Sanitiser

Market share: ~31% globally (2025)

Gmail is the second largest email client and arguably the most frustrating to develop for. It aggressively strips CSS it doesn't like, and it "doesn't like" a lot.

What Gmail Strips

• External stylesheets (<link rel="stylesheet">) are completely removed
• @import rules are completely removed
• @font-face is removed (except Roboto and Google Sans)
• CSS positioning (position, top, right, bottom, left, z-index) is stripped
• Flexbox sub-properties (align-items, justify-content, flex-direction, flex-wrap) are stripped, though display: flex itself is kept
• CSS Grid (display: grid, grid-template-columns, etc.) is stripped entirely
• Transforms, animations, transitions are all stripped
• box-shadow, filter, clip-path, backdrop-filter are stripped
• background-image inside <style> blocks strips the entire style block, not just that rule

What Gmail Keeps

• Standard box model: margin, padding, width, height, border
• background-color, color
• font-family, font-size, font-weight, font-style
• text-align, text-decoration, line-height
• display: block, display: inline-block, display: flex (the property, not sub-properties)
• border-radius
• max-width

The Style Block Gotchas

Gmail's <style> block handling has several traps:

1. One syntax error nukes everything. A single unclosed bracket or invalid property causes Gmail to strip your entire <style> block. It does not partially parse; it's all or nothing.

2. 8,192 character limit. If your CSS exceeds 8,192 characters, the entire block is removed. Minify aggressively.

3. background-image contamination. If any rule in your <style> block contains background-image: url(...), Gmail strips the entire block. Use inline styles for background images.

4. Class name rewriting. Gmail prefixes your class names with its own namespace. This doesn't break anything by itself, but it means you can't rely on JavaScript-based class targeting.

Gmail's 102KB Clipping

When the raw HTML source exceeds approximately 102KB, Gmail clips the email and shows a "Message clipped" link. Everything beyond the threshold is hidden.

This includes all HTML, inline CSS, text content, and tracking URLs, but not externally hosted images. Keep total HTML under 100KB.

Media Queries

• Gmail Web (desktop): Does NOT support media queries
• Gmail Mobile (iOS/Android): Supports media queries

This means responsive breakpoints only work on mobile Gmail. Desktop Gmail ignores them entirely.

---

Outlook: The Word Processor That Renders Email

Market share: ~4% globally, but dominant in enterprise environments

Outlook is actually four different rendering engines wearing the same brand name. In 2026, you need to care about all of them because Microsoft is in the middle of a multi-year migration.

Classic Desktop Outlook (Word Engine: 2007-2021+)

This is the notorious one. Classic Outlook uses Microsoft Word's HTML rendering engine, the same Word that renders your .docx files. It was never designed for modern CSS.

What does NOT work:

• display: flex and display: grid are completely ignored
• border-radius is ignored (everything is square)
• background-image via CSS is ignored (requires VML workaround)
• max-width and min-width are ignored
• position, float are ignored
• CSS animations, transforms, transitions are ignored
• Media queries are ignored
• Web fonts fall back to Times New Roman (not your next font in the stack; it skips everything)
• padding on <p> and <div> is inconsistent
• <div> width/height is ignored (divs become 100% width)

What DOES work:

• Table-based layouts (<table>, <tr>, <td>)
• width and height as HTML attributes on tables/cells
• background-color
• border (solid only)
• text-align
• color and basic font properties (system fonts only)

The DPI Scaling Bug

On Windows machines with display scaling above 100% (common on high-resolution laptops), Outlook converts CSS px values to pt inconsistently. HTML attributes stay as pixels, but CSS pixels get distorted, causing layouts to break.

Fix: Add this to your <head>:

<!--[if gte mso 9]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

Conditional Comments and Ghost Tables

MSO conditional comments (<!--[if mso]>...<![endif]-->) let you write HTML that only classic Outlook sees. Other clients treat them as regular comments and ignore them.

The most common use is ghost tables: table structures that wrap your <div>-based layout so Outlook doesn't collapse it:

<!--[if mso]>
<table role="presentation" width="600"><tr><td>
<![endif]-->

<div style="max-width: 600px;">
  <!-- Your modern HTML here -->
</div>

<!--[if mso]>
</td></tr></table>
<![endif]-->

VML Background Images

Since Outlook ignores CSS background-image, you need VML (Vector Markup Language) for background images:

<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
  style="width:600px;height:400px;">
  <v:fill type="tile" src="https://example.com/bg.jpg" />
  <v:textbox>
<![endif]-->
  <div style="background-image: url('https://example.com/bg.jpg');">
    Content here
  </div>
<!--[if mso]>
  </v:textbox>
</v:rect>
<![endif]-->

New Outlook for Windows (Chromium-Based)

The new Outlook uses a Chromium-based rendering engine and is essentially the same as Outlook.com. It supports flexbox, media queries, background images, border-radius, web fonts, and modern CSS.

Crucially, it does NOT support MSO conditional comments. They're treated as regular comments and ignored. This means your ghost tables and VML workarounds for classic Outlook are harmlessly invisible in the new Outlook.

The 2025-2026 Transition Timeline

• January 2025: Business Standard/Premium users auto-migrated to new Outlook
• April 2026: Enterprise users begin migration
• October 2026: End of support for Word rendering engine
• 2029+: Classic Outlook still supported for non-rendering features

This means 2025-2026 is peak dual-Outlook pain. You must code for both the Word engine AND Chromium simultaneously. The good news: conditional comments make this possible without either version seeing the other's workarounds.

---

Apple Mail: The Gold Standard

Market share: 48-53% globally (the largest email client)

Apple Mail uses WebKit (Safari's engine) and is by far the most standards-compliant email client. If it works in a browser, it probably works in Apple Mail.

What's Supported

Essentially everything: flexbox, grid, media queries, border-radius, background images, transforms, CSS animations (with -webkit- prefix), @font-face web fonts, <link> external stylesheets, @import, and even inline SVG (partial).

Apple Mail scores highest on the Can I email scoreboard across 303 tested features.

Dark Mode Done Right

Apple Mail is the only major client that gives developers full control over dark mode:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  .email-body {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }
}

Without the color-scheme declarations, Apple Mail won't apply your custom dark mode styles and may apply its own inversion instead.

---

Yahoo Mail: The Quirky One

The height to min-height Bug

Yahoo Mail converts height to min-height. This breaks responsive image patterns where you set height: auto in a media query. It becomes min-height: auto, which is invalid CSS and does nothing.

The !important Spacing Bug

This one is subtle:

/* This works: */
display:none!important

/* This does NOT work (note the space): */
display:block !important

If there's a space before !important, Yahoo strips it. No space = keeps it.

CSS Under Comments

Yahoo Mail removes any CSS declarations that appear below HTML comments in your <style> blocks. Keep your comments out of your stylesheets.

Dark Mode

Yahoo Mail applies dark mode to its UI but does not invert email content colours. Your email renders as-is regardless of the user's dark mode setting. This is actually the easiest client to deal with for dark mode.

---

Samsung Mail: The Wild Card

Samsung Mail's biggest quirk is its auto-fit content feature. It uses HTML width attributes (not CSS width) to determine the email's viewport width. An image with width="600" will force Samsung to render at 600px wide, potentially breaking your responsive layout.

Fix: Always use width="100%" as the HTML attribute on images and wrapper tables.

Other gotchas:

• margin works on <p> and headings but not on <div> or <table>
• max-width works on <div> and <table> but not on <td>
• CSS transitions work; keyframe animations do not
• Account type matters: If the Samsung Email app is configured with an Outlook/Exchange account, rendering changes significantly, including loss of media query support

---

The Dark Mode Matrix

Dark mode is the single most inconsistent feature across email clients. Here's the reality:

Client	What Happens	Can You Control It?
Apple Mail	Respects @media (prefers-color-scheme: dark)	Yes, full control
Outlook Mac	Respects @media (prefers-color-scheme: dark)	Yes, full control
Thunderbird	Respects @media (prefers-color-scheme: dark)	Yes, full control
Gmail Web	Does nothing to email content	N/A
Gmail iOS	Full automatic colour inversion	No
Gmail Android	Partial automatic colour inversion	No
Outlook Desktop (Word)	Full automatic inversion with !important overrides	No
Outlook.com / New Outlook	Partial inversion with injected overrides	No
Yahoo Mail	Does not invert email content	N/A

Practical advice: Use off-whites (#FAFAFA) instead of pure white and dark greys (#222222) instead of pure black. Pure #FFFFFF and #000000 trigger the most aggressive inversion in Gmail and Outlook. Slight variations reduce the visual impact of forced inversion.

---

The CSS Support Cheat Sheet

Feature	Gmail	Outlook (Word)	Apple Mail	Yahoo
<style> blocks	Yes (with limits)	Limited	Yes	Yes
External stylesheets	No	No	Yes	No
Media queries	Mobile only	No	Yes	Partial
Flexbox	display:flex only	No	Yes	No
Grid	No	No	Yes	No
border-radius	Yes	No	Yes	Partial
background-image (CSS)	Inline only	No (needs VML)	Yes	Yes
max-width	Yes	No	Yes	Yes
Web fonts	Roboto only	No (Times New Roman fallback)	Yes	Partial
CSS animations	No	No	Yes (-webkit-)	No
box-shadow	No	No	Yes	No

---

Practical Recommendations

1. Start with Tables, Enhance with CSS

The only layout method that works everywhere is <table>. Build your core layout with tables, then use CSS for enhancement:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding: 20px; background-color: #ffffff;">
      <!-- Content here -->
    </td>
  </tr>
</table>

2. Inline Your Critical Styles

Gmail, Outlook, and Yahoo all handle <style> blocks differently. The only CSS delivery method that works identically everywhere is inline styles. Use a CSS inliner tool as part of your build process.

3. Test Before You Send

The rendering differences are too numerous to catch by eyeballing HTML in a browser. Use a preview tool that simulates how each client will actually render your email, including CSS stripping, dark mode inversion, and responsive behaviour.

Tools like mailpeek let you preview Gmail and Outlook rendering directly in your development environment, with dark mode simulation and compatibility scoring that flags unsupported CSS before you send.

4. Design for Degradation

Your email should look good in Apple Mail and acceptable in Outlook. Don't fight Outlook's limitations; design around them:

• Use solid colour backgrounds instead of gradients
• Use border-based buttons instead of border-radius pills
• Include alt text styled with font-size, color, and font-family so emails are readable with images blocked

5. Watch the Outlook Transition

2026 is the last year you need to worry about the Word rendering engine in new Outlook deployments. But enterprise environments move slowly, so expect to support it through 2027-2028 at minimum. Keep your ghost tables and VML workarounds in place for now.

---

Further Reading

• Can I email: The definitive compatibility tables for HTML/CSS in email
• Can I email Scoreboard: Client support rankings across 303 features
• Campaign Monitor CSS Guide: Property-by-property CSS support
• Litmus Dark Mode Guide: Comprehensive dark mode reference
• HTeuMeuLeu Email Bugs: Crowdsourced email client bug tracker
• Google Developers Gmail CSS Support: Official Gmail supported properties

---

This post is maintained by the team behind mailpeek, an open-source Vue 3 email preview component with Gmail/Outlook simulation, dark mode preview, compatibility scoring, and accessibility checking. Star us on GitHub if this guide was useful.