Skip to main content
Emailens
CSS Properties

background-color

CSS property · 21 supported, 0 partial, 0 unsupported across 21 clients

background-color is one of only 6 of 298 tracked features that render identically in all 21 email clients (support data as of Sep 2, 2026).

  • 7/7 webmail, 6/6 desktop, 8/8 mobile clients support background-color fully.
  • Across all clients, only 6 of 298 tracked HTML/CSS features render identically everywhere.

Source: caniemail.com (MIT), via the Emailens engine. Last tested upstream Feb 28, 2019, synced by Emailens Sep 2, 2026.

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.

Client Support

ClientCategoryEngineSupport
GmailwebmailGmail WebSupported
Gmail AndroidmobileGmail MobileSupported
Gmail iOSmobileGmail MobileSupported
Outlook 365webmailOutlook WebSupported
Outlook (New)desktopOutlook WebSupported
Outlook ClassicdesktopMicrosoft WordSupported
Outlook iOSmobileOutlook MobileSupported
Outlook AndroidmobileOutlook MobileSupported
Outlook for MacdesktopWebKitSupported
Apple MaildesktopWebKitSupported
Apple Mail iOSmobileWebKitSupported
Yahoo MailwebmailYahooSupported
Yahoo Mail AndroidmobileYahooSupported
Yahoo Mail iOSmobileYahooSupported
Samsung MailmobileSamsungSupported
ThunderbirddesktopGeckoSupported
HEY MailwebmailWebKitSupported
Proton MailwebmailProtonSupported
AOL MailwebmailAOLSupported
FastmailwebmailFastmailSupported
SuperhumandesktopBlinkSupported

Client-by-client behaviour for background-color

Fully supports background-color (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.

When to use background-color in email

  • Painting hero backgrounds and full-width banner cells using <td bgcolor> alongside CSS for double coverage.
  • Coloring CTA buttons that need to remain on-brand even when background images are blocked by the recipient's client.
  • Establishing alternating row colors in digest-style emails so individual sections remain visually scannable.

Rendering behaviour and edge cases

  • 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.

Recommended fallback strategy

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.

Related Features

Check your own HTML for background-color

Paste your own, or run the sample below. Analyzed in this page, with no signup and nothing stored.

Zero-Friction Engine Preview

Test your background-color layout across 21 email clients

Preview rendering, catch CSS issues, and see how background-color displays across Outlook, Gmail, and Apple Mail. Free, no account needed.

Instant live preview · No signup required · 21 email engines

Last tested upstream: · Last synced by Emailens:

caniemail.com (MIT) records Feb 28, 2019 as the last time background-color was tested in a real client, 7 years before this sync. Syncing copies that result forward, it does not re-test it. Carried in @emailens/engine data v0.12.2.