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

Thunderbird is tested on 261 of 300 features: 228 work, 12 partial, 21 not supported. The other 39 are untested.

Works 228 · Partial 12 · Not supported 21 · Untested 39 · of 300 · Tested on fewer than 270 of 300 features

Gecko · desktop · 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 ↓

Thunderbird 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 Thunderbird and breaks elsewhere

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

39 features are untested in Thunderbird. They are left out here, not counted as not supported.

All 56

Not listed: <base>, <body>, structural tags; the table below has them.

What to write instead

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

animation

The fix for Thunderbird

Replace CSS animation with an animated GIF

after

4 lines

<!-- Use an animated GIF for the effect -->
<img src="https://example.com/badge-animated.gif"
  width="60" height="24" alt="New!"
  style="display: inline-block; border: 0;" />

Show the original

before

5 lines

<style>
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  .badge { animation: pulse 2s infinite; }
</style>
<span class="badge">New!</span>

Test this fix, free

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

The checker needs a computer screen.

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

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

Works in 9 of 21.
Works color-scheme works in Thunderbird.

Works in 4 of 21.
Works meta-color-scheme works in Thunderbird.

Works in 2 of 21.

Live preview: Thunderbird Dark Message Mode applies its own full color rewrite; @media (prefers-color-scheme: dark) is not honoured.

How to target Thunderbird

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

css

3 lines

.moz-text-html .your-class-name {
  /* Replace this comment with your styles */
}

This class is placed on a div inserted between the body and the wrapper so you can also do something like body > div > .wrapper .your-class-name.

css

5 lines

@media screen and (-moz-device-pixel-ratio) {
  .your-class-name {
    /* Replace this comment with your styles */
  }
}

@media is not supported in Thunderbird. Check this selector on your email before relying on it.

Build one for several clients →

Before you send to Thunderbird

Always test the image-blocked rendering, Thunderbird is the most common client where this affects everyday users.
Verify behaviour in the user's installed theme (light, dark, system) to catch contrast collapses early.
Avoid relying on auto-linking, Thunderbird does not auto-detect phone numbers or addresses, so include explicit <a href> wrappers.

Your next question

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

Every feature in Thunderbird

What breaks here (33) Everything (300) Untested (39)

HTML Elements · 10 of 48 not supported or partial here

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

HTML Attributes · 7 of 22 not supported or partial here

[align] Works 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] Works Works in 16 of 21
[cellpadding] Works Works in 18 of 21
[cellspacing] Works Works in 18 of 21
[command] Works Works in 3 of 21
[dir] Works Works in 19 of 21
[height] Works Works in 18 of 21
[hidden] Works Works in 5 of 21
[lang] Works Works in 15 of 21
[loading] Works Works in 4 of 21
[popover] Buggy. Partial Works in 3 of 21
[required] Works Works in 7 of 21
[role] Works Works in 14 of 21
[srcset] Works Works in 4 of 21
[target] The attribute is supported but links always open in a new window anyway. Partial Works in 0 of 21
[valign] Works Works in 20 of 21
[width] Works Works in 18 of 21

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

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

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

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

Pseudo-Elements · 0 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 Works Works in 9 of 21

Pseudo-Classes & Selectors · 1 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 Works 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 Not supported 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 Works 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 Works 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 Untested Works in 5 of 21
align-items Works Works in 13 of 21
animation fix Not supported Works in 5 of 21
aspect-ratio Not supported 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 Works 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 Works 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 Works Works in 4 of 21
column-count Works Works in 16 of 21
columns Works Works in 16 of 21
css-comments Works Works in 14 of 21
cursor Works 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 Works Works in 13 of 21
font-size Works Works in 13 of 21
font-size-adjust Works Works in 10 of 21
font-stretch Works 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 Not supported 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 Works 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 Works 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 Not supported Works in 4 of 21
nesting Works 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 Works 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 Works Works in 6 of 21
shape-outside Works Works in 6 of 21
system-ui Partial. Partial 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 Works Works in 16 of 21
text-decoration-skip-ink Works Works in 7 of 21
text-decoration-style Works 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 Works 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 Works 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 Works 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 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 Thunderbird renders email

Thunderbird uses Mozilla's Gecko rendering engine, the same engine that powers Firefox. It supports <style> blocks, flexbox, grid, positioning and web fonts, though a font on a remote host loads only once the reader allows remote content. Its surprise is media queries: caniemail's tests found them unsupported, including prefers-color-scheme.

JavaScript: All JavaScript is stripped for security. Don't rely on any client-side scripting in emails.
form elements: Form elements render visually but do not submit data. Interactive email patterns won't work in Thunderbird.
External resources: Thunderbird blocks external images by default until the user clicks 'Show remote content'. Design for image-blocked scenarios with good alt text.

Thunderbird uses Gecko, the same engine that powers Firefox, which gives it some of the strongest CSS support of any desktop email client. Modern flexbox, grid, and CSS custom properties all render correctly inside the reading pane.
External resources (images, web fonts) are blocked by default until the user explicitly opts in. Plan for a default-blocked rendering and supply meaningful alt text on every image-bearing <img>.
Dark-mode CSS written for Apple Mail in a prefers-color-scheme query does not carry over: Thunderbird does not support the query. Media queries in general are unsupported, so the layout must work at a single width.
The reading pane has a configurable max-width set by the user. Designs that rely on a hard 600px content frame can render with extra horizontal whitespace on wide displays.