Skip to main content

Our email CSS engine is open source. Give it a star on GitHub 

Emailens

HTML Email Checker

Checks your email's CSS against support data for 21 clients and 300 features, and names the client it breaks in first.

@emailens/engine 0.18.22 · data last changed 10 Nov 2026

Example · engine 0.18.22 on the sample above. Paste yours to replace it.

This email works in all 21.

Outlook Classic scores 82: 6 warnings. 10 properties to review.

  • Outlook Classic82

    6 warnings · 3 notes

  • Yahoo Mail88

    4 warnings · 1 note

  • Yahoo Mail Android91

    3 warnings · 1 note

  • Yahoo Mail iOS91

    3 warnings · 1 note

  • AOL Mail91

    3 warnings · 1 note

  • Gmail94

    2 warnings · 1 note

  • Gmail Android94

    2 warnings · 4 notes

  • Gmail iOS94

    2 warnings · 3 notes

  • Outlook iOS94

    2 warnings · 1 note

  • Outlook 36597

    1 warning · 2 notes

  • Outlook (New)97

    1 warning · 2 notes

  • Outlook Android97

    1 warning · 2 notes

  • Outlook for Mac97

    1 warning · 2 notes

8 at 100: Apple Mail, Apple Mail iOS, Samsung Mail, Thunderbird, HEY Mail, Proton Mail, Fastmail, Superhuman.

What each client flags, worst first

gap · Outlook Classic does not support "gap".Flagged in 14 clients: Outlook Classic, Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, AOL Mail, Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook (New), Outlook iOS, Outlook Android, Outlook for Mac, Fastmail

gap · Works in 7 of 21 · partial in 9 · not supported in 5

Use cellpadding/cellspacing on tables, or padding on cells.

Use padding or margin on child elements instead of gap

gap fix
8 lines
<table role="presentation" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 16px;">Item 1</td>
    <td style="padding-right: 16px;">Item 2</td>
    <td>Item 3</td>
  </tr>
</table>
position · Gmail does not support "position".Flagged in 14 clients: Gmail, Gmail Android, Gmail iOS, Outlook Classic, Outlook iOS, Outlook 365, Outlook (New), Outlook Android, Outlook for Mac, Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, HEY Mail, AOL Mail

position · Works in 2 of 21 · partial in 14 · not supported in 5

Use table-based positioning instead of CSS position.

Use table-based positioning instead of CSS position

position fix
7 lines
<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td valign="top">Content</td>
    <td width="80" valign="top" align="right">Badge</td>
  </tr>
</table>
linear-gradient · Outlook 365 does not support "linear-gradient".Flagged in 12 clients: Outlook 365, Outlook (New), Outlook Classic, Outlook iOS, Outlook Android, Outlook for Mac, Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, AOL Mail, Gmail Android, Samsung Mail

linear-gradient · Works in 9 of 21 · partial in 2 · not supported in 10

Add a solid background-color fallback before the gradient.

Add solid color fallback for gradient backgrounds

linear-gradient fix
5 lines
<td style="background-color: #667eea;
            background-image: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>
top · Gmail does not support "top".Flagged in 9 clients: Gmail, Gmail Android, Gmail iOS, Outlook Classic, Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, AOL Mail, Samsung Mail

top · Works in 11 of 21 · partial in 1 · not supported in 8 · 1 untested

"top" is not supported in this email client.

display:flex · Outlook Classic receives this flex box. The MSO branch needs a table.Flagged in 3 clients: Outlook Classic, Gmail Android, Gmail iOS

display:flex · Works in 18 of 21 · partial in 2 · not supported in 1

Use <table> layouts with <!--[if mso]> conditional comments for Outlook's Word engine.

Use table layout as fallback for flexbox in Outlook

display:flex fix
13 lines
<!--[if mso]>
<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0"><tr>
  <td width="50%" valign="top">Column 1</td>
  <td width="50%" valign="top">Column 2</td>
</tr></table>
<![endif]-->
<!--[if !mso]><! -->
<div style="display: flex; gap: 16px;">
  <div style="flex: 1;">Column 1</div>
  <div style="flex: 1;">Column 2</div>
</div>
<!-- <![endif]-->
font-family · Yahoo Mail drops an inline font-family that names a quoted font, like 'Courier New': that text shows in Yahoo's own font instead.Flagged in 1 client: Yahoo Mail

font-family · Works in 21 of 21

Write the font names without quotes (font-family:Courier New,Consolas,monospace), or set the stack in a <style> class, which Yahoo keeps.

padding · Outlook Classic drops this padding. Put it on a table cell, or set mso-padding-alt on one.Flagged in 1 client: Outlook Classic

padding · Works in 20 of 21 · partial in 1

Outlook Classic drops padding on a <div>. Put it on a <td>.

display · Gmail Android has partial support for "display". `flex`, `grid`, `flow-root`, `contents`, `inline flow-root`, `inline flex`, `inline grid`, `initial`, `revert`, `unset` are not supported with non Google accounts.Flagged in 3 clients: Gmail Android, Gmail iOS, Outlook Classic

display · Works in 13 of 21 · partial in 8

Use tables for layout in email clients.

border-radius · Outlook Classic shows these corners square. Keep the radius for every other client; add a v:roundrect only where the rounded shape matters (a pill button, a round avatar).Flagged in 1 client: Outlook Classic

border-radius · Works in 16 of 21 · partial in 4 · not supported in 1

Round it in Outlook Classic with corner cells: a three-row table with a VML quarter disc in each corner and the content in the middle row. Never wrap the content in a <v:roundrect> with a <v:textbox>: real Outlook 2016 draws the shape at a fixed height and cuts the text past it, and hides any VML inside. Give every cell of a corner row a width attribute (the edge cell the box width minus both corners) and each corner cell font-size:0;line-height:0;mso-line-height-rule:exactly, or Word draws the corners off the box.

Rounded card in Outlook Classic with corner cells

border-radius fix
5 lines
<!--[if mso]><table width="576" cellpadding="0" cellspacing="0" border="0"><tr><td width="10" height="10" style="font-size:0;line-height:0;mso-line-height-rule:exactly"><v:shape xmlns:v="urn:schemas-microsoft-com:vml" coordsize="10,10" path="m 0,10 qy 10,0 l 10,10 x e" fillcolor="#f3f0e8" stroked="f" style="width:10px;height:10px;"></v:shape></td><td width="556" height="10" bgcolor="#f3f0e8" style="font-size:0;line-height:0;mso-line-height-rule:exactly"></td><td width="10" height="10" style="font-size:0;line-height:0;mso-line-height-rule:exactly"><v:shape xmlns:v="urn:schemas-microsoft-com:vml" coordsize="10,10" path="m 0,0 qx 10,10 l 0,10 x e" fillcolor="#f3f0e8" stroked="f" style="width:10px;height:10px;"></v:shape></td></tr><tr><td colspan="3" bgcolor="#f3f0e8"><![endif]-->
<!--[if !mso]><!--><table width="100%" style="background:#f3f0e8;border-radius:10px"><tr><td style="padding:10px 0"><!--<![endif]-->
<table width="100%"><tr><td style="padding:20px 32px">…content, buttons…</td></tr></table>
<!--[if !mso]><!--></td></tr></table><!--<![endif]-->
<!--[if mso]></td></tr><tr><td width="10" height="10" style="font-size:0;line-height:0;mso-line-height-rule:exactly"><v:shape xmlns:v="urn:schemas-microsoft-com:vml" coordsize="10,10" path="m 10,10 qx 0,0 l 10,0 x e" fillcolor="#f3f0e8" stroked="f" style="width:10px;height:10px;"></v:shape></td><td width="556" height="10" bgcolor="#f3f0e8" style="font-size:0;line-height:0;mso-line-height-rule:exactly"></td><td width="10" height="10" style="font-size:0;line-height:0;mso-line-height-rule:exactly"><v:shape xmlns:v="urn:schemas-microsoft-com:vml" coordsize="10,10" path="m 10,0 qy 0,10 l 0,0 x e" fillcolor="#f3f0e8" stroked="f" style="width:10px;height:10px;"></v:shape></td></tr></table><![endif]-->
background · Outlook Classic has partial support for "background". Only `background-color` values are supported.Flagged in 1 client: Outlook Classic

background · Works in 16 of 21 · partial in 5

"background" is not supported in this email client.

The checker needs a computer screen.

The example's worst client, on real installs

Outlook Classic flags 9 properties in the sample. Here are 3 of them in the Emailens probe, screenshotted on real installs, next to our live preview.

padding

Every account includes one free real-device check in classic Outlook, Outlook for Mac and Apple Mail, after you verify your email and run one preview, while this month's free capacity lasts. How real-device checks work →

Your next question

Other free tools: CSS Support Lookup · CSS Inliner · Dark Mode Preview · Outlook Ghost Table Generator · Outlook VML Background Generator · Bulletproof Button Generator · Client Targeting Generator · Email Rendering Playground

Run this check on every email

Lint every pull request with the open-source CLI, free: npx @emailens/cli lint email.html (CLI docs).

The GitHub Action gate (Pro). Pro is $19 a month. The pre-send gate in CI, and the history behind every check. See the plans →

Questions

Which email clients does this check against?

21: Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook (New), Outlook Classic, Outlook iOS, Outlook Android, Outlook for Mac, Apple Mail, Apple Mail iOS, Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, Samsung Mail, Thunderbird, HEY Mail, Proton Mail, AOL Mail, Fastmail, Superhuman. Each has its own CSS support profile, so a property that works in Apple Mail can be dropped by Outlook.

How is the result counted?

Every CSS property in your email is checked against each client's known support. Properties that break layout count as errors; partial or cosmetic ones count as warnings. Each client gets its own score, and a client counts as working at 80 or more, the same rule the checker uses. The headline is the worst client, not an average: an email is only as good as the client it breaks in, so the example above reads 'This email works in all 21. Outlook Classic scores 82: 6 warnings.'

Why does Outlook score lower than everything else?

Outlook Classic on Windows renders with Microsoft Word's engine, where modern CSS like flexbox, grid, border-radius and background gradients is not supported. That's why table-based layouts and VML fallbacks still matter. This checker flags which properties it drops and what to use instead.

What's the difference between this and inlining CSS?

Inlining moves your CSS to where clients can read it; compatibility checking tells you whether they support it at all. Inline first with the CSS inliner, then check what each client honours here.

Get new email CSS fixes by email.