HEY Mail email CSS: what breaks, and what to write instead

HEY Mail is tested on 236 of 300 features: 173 work, 10 partial, 53 not supported. The other 64 are untested.

Works 173 · Partial 10 · Not supported 53 · Untested 64 · of 300 · Tested on fewer than 270 of 300 features

WebKit · webmail · prefers-color-scheme: not supported

Check your email, free

No signup · Five clients free, Outlook Classic included · All 21 with an account

The checker needs a computer screen.

See what breaks ↓

HEY Mail opens with a free account.

A free account opens all 21 clients and keeps your checks for 7 days. Create a free account →

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

Where HEY Mail is the outlier

17 features work in at least 14 of the other 20 clients and are not supported here.

So an email that looks right in most clients can reach your reader in HEY Mail without them.

64 features are untested in HEY Mail. They are left out here, not counted as not supported.

All 17

What works in HEY Mail and breaks elsewhere

38 features work in HEY Mail and in 6 or fewer of the other 20 clients, so they need a fallback.

64 features are untested in HEY Mail. They are left out here, not counted as not supported.

All 37

Not listed: @import, structural tags; the table below has them.

What to write instead

4 features HEY Mail does not fully support have a written fix. See them in the table ↓

<form>

The fix for HEY Mail

Replace embedded form with a link to a hosted form

after

13 lines

<table role="presentation" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background-color: #6d28d9; border-radius: 6px;
               padding: 12px 32px;">
      <a href="https://example.com/subscribe"
        style="color: #fff; text-decoration: none;
               font-family: Arial, sans-serif;
               font-weight: bold;">
        Subscribe Now
      </a>
    </td>
  </tr>
</table>

Show the original

before

4 lines

<form action="/subscribe" method="POST">
  <input type="email" placeholder="Email" />
  <button type="submit">Subscribe</button>
</form>

Test this fix, free

HEY Mail opens with a free account; the checker shows five clients without one.

The checker needs a computer screen.

<svg>

The fix for HEY Mail

Convert inline SVG to an image for email compatibility

after

3 lines

<img src="https://example.com/icon.png"
  width="24" height="24" alt="Icon"
  style="display: block; border: 0;" />

Show the original

before

3 lines

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7l10 5 10-5-10-5z" fill="#6d28d9"/>
</svg>

Test this fix, free

HEY Mail opens with a free account; the checker shows five clients without one.

The checker needs a computer screen.

<video>

The fix for HEY Mail

Replace video with animated GIF or linked thumbnail

after

5 lines

<a href="https://example.com/watch" target="_blank">
  <img src="https://example.com/video-thumb.gif"
    width="600" alt="Watch the video"
    style="display: block; border: 0; max-width: 100%;" />
</a>

Show the original

before

3 lines

<video width="600" autoplay muted>
  <source src="demo.mp4" type="video/mp4">
</video>

Test this fix, free

HEY Mail opens with a free account; the checker shows five clients without one.

The checker needs a computer screen.

Paste your email and see what HEY Mail does to it.

Check your email, free

No signup · Five clients free, Outlook Classic included · All 21 with an account

The checker needs a computer screen.

Dark mode in HEY Mail

Not supported @media prefers-color-scheme is not supported in HEY Mail.

Works in 9 of 21.
Not supported color-scheme is not supported in HEY Mail.

Works in 4 of 21.
Not supported meta-color-scheme is not supported in HEY Mail.

Works in 2 of 21.

Live preview: HEY Mail does not honour @media (prefers-color-scheme: dark); the query is rewritten to @media (false).

Before you send to HEY Mail

Validate that the email reads cleanly without external resources, HEY's privacy stance often blocks them on first open.
Test the alt-text and placeholder rendering, HEY users see this state more often than users of less-privacy-strict clients.
Avoid embedding tracking pixels for HEY audiences; they will be stripped, and any analytics depending on them will under-report.

Your next question

Gmail · Outlook 365 · Yahoo Mail · Proton Mail · AOL Mail · Fastmail

Every feature in HEY Mail

What breaks here (63) Everything (300) Untested (64)

HTML Elements · 31 of 48 not supported or partial here

<abbr> Not supported Works in 14 of 21
<acronym> Untested Works in 13 of 21
<address> Works Works in 20 of 21
<audio> Not supported Works in 4 of 21
<base> Buggy. Partial Works in 4 of 21
<bdi> Not supported Works in 6 of 21
<blockquote> Buggy. Partial Works in 19 of 21
<body> Partial. Partial Works in 5 of 21
<button type="reset"> Not supported Works in 10 of 21
<button type="submit"> Not supported Works in 11 of 21
<code> Works Works in 20 of 21
<del> Works Works in 20 of 21
<dfn> Untested Works in 17 of 21
<dialog> Not supported Works in 5 of 21
<div> Works Works in 20 of 21
<form> fix Not supported Works in 10 of 21
<h1> Works Works in 20 of 21
<hr> Untested Works in 18 of 21
<img> Works Works in 19 of 21
<input type="checkbox"> Not supported Works in 16 of 21
<input type="hidden"> Not supported Works in 16 of 21
<input type="radio"> Not supported Works in 16 of 21
<input type="reset"> Not supported Works in 15 of 21
<input type="submit"> Not supported Works in 12 of 21
<input type="text"> Not supported Works in 13 of 21
<link> fix Not supported Works in 3 of 21
<marquee> Not supported Works in 8 of 21
<meter> Not supported Works in 11 of 21
<object> Not supported Works in 1 of 21
<p> Works Works in 20 of 21
<picture> Not supported Works in 4 of 21
<pre> Works Works in 20 of 21
<progress> Not supported Works in 6 of 21
<rp> Not supported Works in 15 of 21
<rt> Not supported Works in 15 of 21
<ruby> Not supported Works in 15 of 21
<select> Not supported Works in 14 of 21
<small> Works Works in 20 of 21
<span> Works Works in 20 of 21
<strike> Not supported Works in 17 of 21
<strong> Works Works in 20 of 21
<style> Works Works in 16 of 21
<svg> fix Not supported Works in 5 of 21
<table> Works Works in 20 of 21
<textarea> Not supported Works in 13 of 21
<ul> Works Works in 7 of 21
<video> fix Not supported Works in 3 of 21
<wbr> Not supported Works in 16 of 21

HTML Attributes · 16 of 22 not supported or partial here

[align] Partial. Partial Works in 17 of 21
[aria-describedby] Not supported Works in 9 of 21
[aria-hidden] Not supported Works in 13 of 21
[aria-label] Not supported Works in 13 of 21
[aria-labelledby] Not supported Works in 7 of 21
[aria-live] Not supported Works in 8 of 21
[background] Not supported Works in 16 of 21
[cellpadding] Untested Works in 18 of 21
[cellspacing] Untested Works in 18 of 21
[command] Untested Works in 3 of 21
[dir] Works Works in 19 of 21
[height] Not supported Works in 18 of 21
[hidden] Untested Works in 5 of 21
[lang] Not supported Works in 15 of 21
[loading] Not supported. Partial Works in 4 of 21
[popover] Not supported Works in 3 of 21
[required] Not supported Works in 7 of 21
[role] Not supported Works in 14 of 21
[srcset] Not supported Works in 4 of 21
[target] Not supported. Not supported Works in 0 of 21
[valign] Works Works in 20 of 21
[width] Not supported Works in 18 of 21

HTML & Email Structure · 6 of 8 not supported or partial here

amp4email Not supported Works in 6 of 21
anchor-links Not supported Works in 12 of 21
doctype Not supported Works in 13 of 21
html-comments Untested Works in 18 of 21
html5-semantics Partial. Partial Works in 6 of 21
image-maps Not supported Works in 15 of 21
mailto-links Works Works in 17 of 21
meta-color-scheme Not supported Works in 2 of 21

CSS At-Rules · 1 of 10 not supported or partial here

@font-face Works Works in 6 of 21
@import Works Works in 4 of 21
@keyframes Works Works in 7 of 21
@media Works Works in 5 of 21
@media device-pixel-ratio Works Works in 10 of 21
@media hover Untested Works in 9 of 21
@media orientation Works Works in 11 of 21
@media prefers-color-scheme Not supported. Not supported Works in 9 of 21
@media prefers-reduced-motion Works Works in 9 of 21
@supports Works Works in 9 of 21

Pseudo-Elements · 1 of 6 not supported or partial here

::after Works Works in 6 of 21
::before Works Works in 6 of 21
::first-letter Works Works in 10 of 21
::first-line Works Works in 10 of 21
::marker Works Works in 10 of 21
::placeholder Not supported Works in 9 of 21

Pseudo-Classes & Selectors · 2 of 34 not supported or partial here

:adjacent-sibling Works Works in 16 of 21
:attribute-selector Works Works in 6 of 21
:chaining Works Works in 14 of 21
:checked Not supported Works in 9 of 21
:child-combinator Works Works in 16 of 21
:class-selector Works Works in 17 of 21
:descendant-combinator Works Works in 17 of 21
:first-child Works Works in 12 of 21
:first-of-type Works Works in 12 of 21
:focus Works Works in 10 of 21
:focus-visible Untested Works in 6 of 21
:focus-within Untested Works in 6 of 21
:general-sibling Works Works in 16 of 21
:grouping Works Works in 17 of 21
:has Works Works in 5 of 21
:hover Works Works in 12 of 21
:id-selector Works Works in 17 of 21
:lang Untested Works in 6 of 21
:last-child Works Works in 12 of 21
:last-of-type Works Works in 12 of 21
:link Works Works in 13 of 21
:not Works Works in 6 of 21
:nth-child Works Works in 6 of 21
:nth-last-child Works Works in 6 of 21
:nth-of-type Works Works in 6 of 21
:only-child Works Works in 12 of 21
:only-of-type Works Works in 12 of 21
:target Not supported Works in 7 of 21
:type-selector Works Works in 17 of 21
:universal-selector Works Works in 16 of 21
:visited Works Works in 8 of 21
pseudo-class-active Works Works in 8 of 21
pseudo-class-default Untested Works in 10 of 21
pseudo-class-nth-last-of-type Works Works in 6 of 21

CSS Functions · 0 of 8 not supported or partial here

calc Works Works in 8 of 21
clamp Works Works in 6 of 21
conic-gradient Works Works in 6 of 21
fit-content Works Works in 11 of 21
linear-gradient Works Works in 9 of 21
max Works Works in 6 of 21
min Works Works in 6 of 21
radial-gradient Works Works in 10 of 21

CSS Properties · 6 of 164 not supported or partial here

!important Works Works in 11 of 21
accent-color Works Works in 5 of 21
align-items Works Works in 13 of 21
animation Works Works in 5 of 21
aspect-ratio Works Works in 5 of 21
backdrop-filter Untested Works in 6 of 21
background Works Works in 16 of 21
background-blend-mode Works Works in 13 of 21
background-clip Works Works in 14 of 21
background-color Works Works in 21 of 21
background-image Works Works in 16 of 21
background-origin Works Works in 14 of 21
background-position Works Works in 20 of 21
background-repeat Works Works in 20 of 21
background-size Works Works in 17 of 21
bimi Not supported Works in 9 of 21
block-size Works Works in 7 of 21
border Works Works in 20 of 21
border-collapse Untested Works in 19 of 21
border-image Works Works in 7 of 21
border-inline Untested Works in 3 of 21
border-inline-individual Untested Works in 3 of 21
border-inline-longhand Untested Works in 4 of 21
border-radius Works Works in 16 of 21
border-radius-logical Untested Works in 3 of 21
border-spacing Untested Works in 17 of 21
bottom Works Works in 11 of 21
box-shadow Works Works in 14 of 21
box-sizing Works Works in 16 of 21
caption-side Works Works in 20 of 21
clear Untested Works in 9 of 21
clip-path Works Works in 8 of 21
color Works Works in 21 of 21
color-scheme Not supported Works in 4 of 21
column-count Works Works in 16 of 21
columns Works Works in 16 of 21
css-comments Untested Works in 14 of 21
cursor Untested Works in 2 of 21
custom-properties Works Works in 6 of 21
direction Works Works in 21 of 21
display Works Works in 13 of 21
display:flex Works Works in 18 of 21
display:grid Works Works in 18 of 21
display:none Works Works in 20 of 21
empty-cells Untested Works in 14 of 21
filter Works Works in 7 of 21
flex Works Works in 13 of 21
flex-basis Works Works in 13 of 21
flex-direction Works Works in 12 of 21
flex-wrap Works Works in 13 of 21
float Works Works in 14 of 21
font Works Works in 20 of 21
font-family Works Works in 21 of 21
font-kerning Untested Works in 13 of 21
font-size Untested Works in 13 of 21
font-size-adjust Untested Works in 10 of 21
font-stretch Untested Works in 10 of 21
font-weight Works Works in 16 of 21
gap Works Works in 7 of 21
grid-template-columns Works Works in 7 of 21
height Works Works in 16 of 21
hyphenate-character Untested Works in 4 of 21
hyphenate-limit-chars Untested Works in 1 of 21
hyphens Untested Works in 4 of 21
inert Untested Works in 3 of 21
inline-size Works Works in 4 of 21
inset Untested Works in 3 of 21
justify-content Works Works in 13 of 21
left Works Works in 11 of 21
letter-spacing Works Works in 20 of 21
light-dark Buggy. Partial Works in 3 of 21
line-height Works Works in 20 of 21
list-style Works Works in 11 of 21
list-style-image Works Works in 6 of 21
list-style-position Works Works in 19 of 21
list-style-type Works Works in 21 of 21
margin Works Works in 8 of 21
margin-block-start-end Untested Works in 4 of 21
margin-inline-block Works Works in 6 of 21
margin-inline-start-end Untested Works in 4 of 21
mask-image Untested Works in 4 of 21
max-block-size Untested Works in 5 of 21
max-height Works Works in 20 of 21
max-inline-size Untested Works in 4 of 21
max-width Works Works in 20 of 21
min-block-size Untested Works in 4 of 21
min-height Works Works in 19 of 21
min-inline-size Untested Works in 5 of 21
min-width Works Works in 20 of 21
mix-blend-mode Works Works in 13 of 21
modern-color Works Works in 4 of 21
nesting Untested Works in 2 of 21
object-fit Works Works in 14 of 21
object-position Works Works in 14 of 21
opacity Works Works in 19 of 21
orphans Untested Works in 10 of 21
outline Works Works in 20 of 21
outline-offset Works Works in 7 of 21
overflow Works Works in 4 of 21
overflow-wrap Untested Works in 2 of 21
padding Works Works in 20 of 21
padding-block-start-end Untested Works in 4 of 21
padding-inline-block Untested Works in 3 of 21
padding-inline-start-end Untested Works in 4 of 21
position Partial. Partial Works in 2 of 21
resize Untested Works in 1 of 21
rgb Works Works in 12 of 21
rgba Works Works in 12 of 21
right Works Works in 11 of 21
scroll-snap Works Works in 6 of 21
shape-margin Untested Works in 6 of 21
shape-outside Untested Works in 6 of 21
system-ui Works Works in 12 of 21
tab-size Untested Works in 8 of 21
table-layout Untested Works in 16 of 21
text-align Works Works in 13 of 21
text-align-last Untested Works in 7 of 21
text-decoration Works Works in 14 of 21
text-decoration-color Works Works in 17 of 21
text-decoration-line Untested Works in 16 of 21
text-decoration-skip-ink Works Works in 7 of 21
text-decoration-style Untested Works in 16 of 21
text-decoration-thickness Works Works in 7 of 21
text-emphasis Untested Works in 9 of 21
text-emphasis-position Untested Works in 4 of 21
text-indent Works Works in 13 of 21
text-justify Untested Works in 0 of 21
text-orientation Untested Works in 13 of 21
text-overflow Works Works in 13 of 21
text-shadow Works Works in 12 of 21
text-transform Works Works in 20 of 21
text-underline-offset Works Works in 7 of 21
text-underline-position Untested Works in 8 of 21
text-wrap Untested Works in 4 of 21
top Works Works in 11 of 21
transform Works Works in 7 of 21
transition Buggy. Partial Works in 4 of 21
unit-ch Works Works in 15 of 21
unit-cm Works Works in 20 of 21
unit-em Works Works in 20 of 21
unit-ex Works Works in 20 of 21
unit-in Works Works in 20 of 21
unit-initial Works Works in 12 of 21
unit-mm Works Works in 20 of 21
unit-pc Works Works in 20 of 21
unit-percent Works Works in 20 of 21
unit-pt Works Works in 20 of 21
unit-px Works Works in 20 of 21
unit-rem Works Works in 15 of 21
unit-vh Works Works in 17 of 21
unit-vmax Works Works in 15 of 21
unit-vmin Works Works in 15 of 21
unit-vw Works Works in 18 of 21
user-select Untested Works in 3 of 21
vertical-align Works Works in 21 of 21
visibility Works Works in 13 of 21
white-space Works Works in 15 of 21
white-space-collapse Untested Works in 4 of 21
widows Untested Works in 10 of 21
width Works Works in 20 of 21
word-break Buggy. Partial Works in 4 of 21
word-spacing Untested Works in 14 of 21
writing-mode Works Works in 13 of 21
z-index Works Works in 17 of 21

How HEY Mail renders email

HEY Mail is built by Basecamp and uses a WebKit-based rendering engine. It has good overall CSS support but takes an opinionated approach to email display, it strips tracking pixels, modifies some layout properties, and applies its own reading experience on top of your HTML.

Tracking pixels: HEY aggressively blocks tracking pixels and remote image loading by default. Open-rate tracking won't work for HEY users.
Layout modifications: HEY may modify your email's width and padding to fit its reading experience. Fixed-width layouts can break.
External fonts: External font loading may be blocked as part of HEY's privacy-first approach. Rely on system font stacks.

HEY's reading experience overlay applies its own typography hierarchy and spacing on top of the email content. Designs that depend on precise edge-to-edge spacing should account for HEY's wrapper padding.
Tracking pixel detection is aggressive, known tracking domains and 1×1 transparent images are stripped or replaced. Open-rate analytics that depend on these mechanisms will under-count HEY users.
External @font-face fetches may be blocked under HEY's privacy-first defaults. Always supply a complete system-font fallback stack rather than relying on a single custom font.
Image loading is opt-in for unknown senders, so first-open rendering shows alt text and image placeholder boxes. Design with explicit width/height attributes so layout doesn't reflow when images load.