CSS property · 10 real installs 14 Oct 2026 · data last changed 10 Nov 2026
background-color in email clients
Works in all 21.
caniemail (MIT) via @emailens/engine 0.18.22
No signup · Five clients free, Outlook Classic included · All 21 with an account
The checker needs a computer screen.
A free account opens all 21 clients and keeps your checks for 7 days. Create a free account →
background-color on 10 real installs
One Emailens probe, screenshotted on each install on 14 October 2026, next to our live preview of the same client. Where background-color is supported you should see: amber fill.
caniemail: background-color works in Outlook Classic.
caniemail: background-color works in Outlook 365.
This Outlook.com install drops the <style> in the head, so only inline styles apply.
caniemail: background-color works in Apple Mail.
caniemail: background-color works in Apple Mail iOS.
caniemail: background-color works in Yahoo Mail.
Also captured, not counted as evidence (3)
- Outlook for Microsoft 365 · not mapped to an engine client yet Real screenshot
- Outlook 2019 for Mac (legacy app) · not counted as Outlook for Mac Real screenshot
This is the legacy Outlook for Mac app. The new Outlook for Mac, which the table describes, drops gradients, grid sizing functions, var() and more.
- Gmail (web) · not counted as Gmail Real screenshot
This Gmail install does not apply Gmail's sanitiser, so it shows more than real Gmail does.
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 →
All 21 clients
| Client | Support |
|---|---|
| Gmail | Works |
| Gmail Android | Works |
| Gmail iOS | Works |
| Outlook 365 | Works |
| Outlook (New) | Works |
| Outlook Classic | Works |
| Outlook iOS | Works |
| Outlook Android | Works |
| Outlook for Mac | Works |
| Apple Mail | Works |
| Apple Mail iOS | Works |
| Yahoo Mail | Works |
| Yahoo Mail Android | Works |
| Yahoo Mail iOS | Works |
| Samsung Mail | Works |
| Thunderbird | Works |
| HEY Mail | Works |
| Proton Mail | Works |
| AOL Mail | Works |
| Fastmail | Works |
| Superhuman | Works |
How background-color behaves
background-color is the foundation of branded email layouts: it paints the canvas behind tables, cells, hero blocks, and CTAs. Support is essentially universal across clients, but background-color interacts with dark mode and accessibility tooling in ways that often break visual hierarchy when not paired with a corresponding text color.
- Outlook respects background-color when applied directly to <td>, less reliably on <div>; use both the bgcolor attribute and inline CSS for safety.
- Gmail and Yahoo will reverse background-color in dark mode unless the email opts out via meta color-scheme.
- Some clients ignore background-color on rounded buttons unless the parent table also defines it, always set it on the cell, not just the inner element.
Always pair background-color with a matching color on text inside the element to avoid contrast collapse during dark-mode inversion. Use the deprecated bgcolor HTML attribute alongside CSS to cover the legacy Outlook path. For images that overlay a colored area, set the cell background-color to match the image's dominant color so blocked images still look intentional.
Your next question
Paste your email
Get new email CSS fixes by email.