Gmail vs Outlook: Email Rendering Differences
"Why does my email look different in Gmail and Outlook?" is one of the most common questions in email development. The answer: they use completely different rendering engines, so the same HTML can produce wildly different results. This comparison is part of the ultimate guide to HTML email testing.
The Core Difference: Rendering Engines
Gmail uses a browser-based renderer that strips and rewrites your HTML. Outlook desktop uses Microsoft Word's HTML engine. These two approaches create fundamentally different behaviors.
Gmail
- Browser-based rendering (WebKit/Blink)
- Strips
<style>in some contexts - Rewrites class names
- Supports most inline CSS
- Clips emails over 102 KB
- Partial
<form>support (varies by platform)
Outlook Desktop
- Microsoft Word rendering engine
- No
background-image(needs VML) - No
border-radius - No CSS Grid or Flexbox
- DPI scaling issues
- Supports MSO conditional comments
CSS Property Support Comparison
Here's how key CSS properties behave across Gmail and Outlook:
| Property | Gmail | Outlook Desktop |
|---|---|---|
background-color | ✓ | ✓ |
background-image | ✓ | ✗ (use VML) |
border-radius | ✓ | ✗ |
box-shadow | ✗ | ✗ |
max-width | ✓ | Partial |
flexbox | Partial | ✗ |
CSS Grid | ✗ | ✗ |
media queries | Partial | ✗ |
web fonts (@font-face) | ✗ | Partial |
padding (on divs) | ✓ | Partial |
margin | Partial | Partial |
How to Design for Both Gmail and Outlook
For a comprehensive breakdown of CSS best practices across all email clients, see our guide on HTML email best practices for 2026. It covers inline vs internal CSS strategies and exactly which properties are safe to use.
- Use table-based layouts — Works in both, essential for Outlook
- Inline all critical CSS — Gmail may strip
<style>blocks - Add MSO conditionals for Outlook — Target Outlook-specific fixes without affecting Gmail
- Declare fallback fonts — Web fonts fail in both clients (learn more in our email safe fonts guide)
- Keep HTML under 102 KB — Gmail clips large emails
- Test dark mode — Both clients handle dark mode differently
What Tool Can Test HTML Email Across Mobile and Desktop Clients?
MailViewr lets you preview your email across Gmail and Outlook (plus Apple Mail and mobile clients) side by side. With the email preview tool, you can see exactly how each rendering engine handles your HTML. The compatibility checker flags issues specific to each client so you can fix rendering differences before sending.
You can also send test emails directly to your Gmail and Outlook inboxes to verify real-world rendering — all from one tool. For detailed testing strategies, see our guides on previewing in Gmail and testing Outlook rendering.
Compare Gmail & Outlook Rendering Now
Free Side-by-Side Preview
Paste your HTML and compare how Gmail and Outlook render it. Get a compatibility score for each client.
Compare Now →