Email Client Compatibility Matrix

Not every CSS property or HTML feature works the same across all email clients. This reference shows you what’s supported, what’s partially supported, and what to avoid. The Email Love plugin handles most compatibility issues automatically, but understanding the landscape helps you design with confidence.

Layout & Structure

Feature	Apple Mail	Gmail	Outlook (Win)	Yahoo
Table-based layouts	✅	✅	✅	✅
Max-width	✅	✅	❌	✅
Responsive media queries	✅	❌	❌	❌
MJML responsive fallback	✅	✅	✅	✅
Flexbox / Grid	❌	❌	❌	❌

Typography

Feature	Apple Mail	Gmail	Outlook (Win)	Yahoo
Custom web fonts	✅	❌	❌	❌
Google Fonts	✅	Partial	❌	Partial
Web-safe fonts	✅	✅	✅	✅
Font size	✅	✅	✅	✅
Line height	✅	✅	✅	✅
Letter spacing	✅	✅	❌	✅

Visual Styling

Feature	Apple Mail	Gmail	Outlook (Win)	Yahoo
Background color	✅	✅	✅	✅
Background image	✅	✅	VML only	✅
Border radius	✅	✅	❌	✅
Box shadow	✅	❌	❌	❌
Opacity	✅	❌	❌	❌
CSS gradients	✅	❌	❌	❌

Media & Interactivity

Feature	Apple Mail	Gmail	Outlook (Win)	Yahoo
Images (JPG/PNG)	✅	✅	✅	✅
Animated GIFs	✅	✅	1st frame	✅
SVG	✅	❌	❌	❌
Video	❌	❌	❌	❌
JavaScript	❌	❌	❌	❌
CSS animations	✅	❌	❌	❌
Forms/inputs	Partial	❌	❌	❌

Dark Mode

Feature	Apple Mail	Gmail	Outlook (Win)	Yahoo
Custom dark mode CSS	✅	❌	❌	❌
Auto color inversion	✅	✅	✅	✅
prefers-color-scheme	✅	❌	❌	❌

Email client support changes over time. Gmail and Outlook regularly update their rendering engines. For the latest compatibility data, check caniemail.com.

Understanding MJML Email Accessibility Guide

​Layout & Structure

​Typography

​Visual Styling

​Media & Interactivity

​Dark Mode

Layout & Structure

Typography

Visual Styling

Media & Interactivity

Dark Mode