Superhuman email CSS: what breaks, and what to write instead

Superhuman is tested on 97 of 300 features: 86 work, 5 partial, 6 not supported. The other 203 are untested.

Works 86 · Partial 5 · Not supported 6 · Untested 203 · of 300 · Tested on fewer than 270 of 300 features

Blink · desktop · prefers-color-scheme: untested

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 ↓

Superhuman 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

What works in Superhuman and breaks elsewhere

15 features work in Superhuman and in 6 or fewer of the other 20 clients, so they need a fallback.

203 features are untested in Superhuman. They are left out here, not counted as not supported.

All 15

What to write instead

3 features Superhuman does not fully support have a written fix. See them in the table ↓

<form>

The fix for Superhuman

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

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

The checker needs a computer screen.

<video>

The fix for Superhuman

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

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

The checker needs a computer screen.

Paste your email and see what Superhuman 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 Superhuman

Untested caniemail has no record for @media prefers-color-scheme in Superhuman.

Works in 9 of 21.
Untested caniemail has no record for color-scheme in Superhuman.

Works in 4 of 21.
Untested caniemail has no record for meta-color-scheme in Superhuman.

Works in 2 of 21.

Live preview: Superhuman Carbon theme overlays its own dark styling; prefers-color-scheme is not a reliable control surface.

How to target Superhuman

Selectors that single out Superhuman, from the community list the engine ships (howtotarget.email). Copy one and replace .your-class-name.

css

3 lines

.ShadowHTML .your-class-name {
  /* Replace this comment with your styles */
}

The class name ShadowHTML is added by superhuman email client.

Build one for several clients →

Before you send to Superhuman

Verify image rendering in Superhuman directly, the proxying behaviour can subtly alter quality and remove tracking-dependent visuals.
Avoid embedding tracking pixels for Superhuman audiences, they will be stripped or proxied, distorting open metrics.
Check link previews: Superhuman shows preview cards for some URLs that override your in-email layout decisions.

Your next question

Where do Superhuman and Gmail differ?

Outlook (New) · Outlook Classic · Outlook for Mac · Apple Mail · Thunderbird

No client shares enough tested features with Superhuman for a fair comparison yet.

Every feature in Superhuman

What breaks here (11) Everything (300) Untested (203)

HTML Elements · 4 of 48 not supported or partial here

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

HTML Attributes · 0 of 22 not supported or partial here

[align] Untested Works in 17 of 21
[aria-describedby] Untested Works in 9 of 21
[aria-hidden] Untested Works in 13 of 21
[aria-label] Untested Works in 13 of 21
[aria-labelledby] Untested Works in 7 of 21
[aria-live] Untested Works in 8 of 21
[background] Untested 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] Untested Works in 19 of 21
[height] Untested Works in 18 of 21
[hidden] Untested Works in 5 of 21
[lang] Untested Works in 15 of 21
[loading] Untested Works in 4 of 21
[popover] Untested Works in 3 of 21
[required] Untested Works in 7 of 21
[role] Untested Works in 14 of 21
[srcset] Untested Works in 4 of 21
[target] Untested Works in 0 of 21
[valign] Untested Works in 20 of 21
[width] Untested Works in 18 of 21

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

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

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

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

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

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

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

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

CSS Functions · 0 of 8 not supported or partial here

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

CSS Properties · 5 of 164 not supported or partial here

!important Untested Works in 11 of 21
accent-color Works Works in 5 of 21
align-items Works Works in 13 of 21
animation Partial. Partial Works in 5 of 21
aspect-ratio Works Works in 5 of 21
backdrop-filter Works Works in 6 of 21
background Works Works in 16 of 21
background-blend-mode Untested 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 Untested Works in 9 of 21
block-size Untested Works in 7 of 21
border Works Works in 20 of 21
border-collapse Works Works in 19 of 21
border-image Untested 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 Works Works in 17 of 21
bottom Untested 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 Untested 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 Works Works in 2 of 21
custom-properties Untested 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 Works 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 Untested Works in 20 of 21
font-family Works Works in 21 of 21
font-kerning Untested Works in 13 of 21
font-size Works 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 Untested Works in 4 of 21
inset Untested Works in 3 of 21
justify-content Works Works in 13 of 21
left Untested Works in 11 of 21
letter-spacing Works Works in 20 of 21
light-dark Untested Works in 3 of 21
line-height Works Works in 20 of 21
list-style Works Works in 11 of 21
list-style-image Untested Works in 6 of 21
list-style-position Untested 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 Untested 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 Untested 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 Works Works in 10 of 21
outline Works Works in 20 of 21
outline-offset Untested Works in 7 of 21
overflow Works Works in 4 of 21
overflow-wrap Works 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 Not supported Works in 1 of 21
rgb Untested Works in 12 of 21
rgba Untested Works in 12 of 21
right Untested Works in 11 of 21
scroll-snap Untested Works in 6 of 21
shape-margin Untested Works in 6 of 21
shape-outside Untested Works in 6 of 21
system-ui Untested Works in 12 of 21
tab-size Untested Works in 8 of 21
table-layout Works 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 Untested Works in 17 of 21
text-decoration-line Untested Works in 16 of 21
text-decoration-skip-ink Untested Works in 7 of 21
text-decoration-style Untested Works in 16 of 21
text-decoration-thickness Untested 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 Untested Works in 7 of 21
text-underline-position Untested Works in 8 of 21
text-wrap Untested Works in 4 of 21
top Untested Works in 11 of 21
transform Partial Works in 7 of 21
transition Partial. Partial Works in 4 of 21
unit-ch Untested Works in 15 of 21
unit-cm Untested Works in 20 of 21
unit-em Untested Works in 20 of 21
unit-ex Untested Works in 20 of 21
unit-in Untested Works in 20 of 21
unit-initial Untested Works in 12 of 21
unit-mm Untested Works in 20 of 21
unit-pc Untested Works in 20 of 21
unit-percent Untested Works in 20 of 21
unit-pt Untested Works in 20 of 21
unit-px Untested Works in 20 of 21
unit-rem Untested Works in 15 of 21
unit-vh Untested Works in 17 of 21
unit-vmax Untested Works in 15 of 21
unit-vmin Untested Works in 15 of 21
unit-vw Untested Works in 18 of 21
user-select Works 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 Works Works in 10 of 21
width Works Works in 20 of 21
word-break Works Works in 4 of 21
word-spacing Works Works in 14 of 21
writing-mode Works Works in 13 of 21
z-index Works Works in 17 of 21

How Superhuman renders email

Superhuman uses the Blink rendering engine (the same engine as Chrome), giving it excellent CSS support. It renders most modern CSS properties correctly, including flexbox, custom fonts, and CSS animations. It's one of the most capable email clients from a rendering perspective.

Interactive elements: While Superhuman renders interactive CSS and HTML well, email interaction doesn't persist. Don't rely on :checked or form state.
Image loading: Superhuman may proxy or cache images. Use absolute URLs for all image sources and don't rely on server-side image tracking.

Built on Blink (Chromium), so Superhuman renders email much like a modern browser: flexbox, grid and @font-face are supported. Newer features such as custom properties and :has have not been verified here, so do not rely on them.
Image proxy and caching are aggressive. Images are fetched server-side, stripped of tracking parameters, and re-served from Superhuman's infrastructure. Open-tracking pixels and per-recipient image hashing fail.
@font-face is supported, but Superhuman's read-mode UI applies its own typography hierarchy on top of the email content, which can interact unexpectedly with custom font sizing.
Dark mode is theme-driven, Superhuman has its own theming system that overlays user-side styles regardless of color-scheme meta tags. Test dark mode visuals from inside the Superhuman client, not just by forcing prefers-color-scheme in a browser.