CSS property · data last changed 10 Nov 2026
custom-properties in email clients
Works in 6 of 21. Not supported in Gmail, Gmail Android, Gmail iOS and 11 more. Untested in Superhuman.
Your reader in Outlook Classic sees the email without custom-properties, even if it looks right where you tested it.
caniemail (MIT) via @emailens/engine 0.18.22
What to do instead in Outlook Classic
Never write a custom property as the sole declaration for an essential styling rule. Always declare the static fallback value first, followed by the variable declaration with an inline default parameter: color: #0070f3; color: var(--brand-primary, #0070f3);. Restrictive clients parse the static rule and ignore the custom property, while supporting clients evaluate the variable.
There is no drop-in fix for custom-properties in Outlook Classic. Design so the email still reads without it.
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 →
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 →
custom-properties is not among the 24 features we have screenshotted on real installs. The ones we have →
All 21 clients, problems first
| Client | Support |
|---|---|
| Gmail | Not supported See caveat 1 |
| Gmail Android | Not supported See caveat 2 |
| Gmail iOS | Not supported See caveat 2 |
| Outlook 365 | Not supported |
| Outlook (New) | Not supported |
| Outlook Classic | Not supported |
| Outlook iOS | Not supported |
| Outlook Android | Not supported |
| Outlook for Mac | Not supported |
| Yahoo Mail | Not supported |
| Yahoo Mail Android | Not supported |
| Yahoo Mail iOS | Not supported |
| AOL Mail | Not supported |
| Fastmail | Not supported See caveat 1 |
| Superhuman | Untested |
Works in 6: Apple Mail, Apple Mail iOS, Samsung Mail and 3 more. Show all
| Client | Support |
|---|---|
| Apple Mail | Works |
| Apple Mail iOS | Works |
| Samsung Mail | Works |
| Thunderbird | Works |
| HEY Mail | Works |
| Proton Mail | Works |
Caveats (2)
- 1. Gmail, Fastmail: Partial. The
var()function is supported, but not the variable declaration. - 2. Gmail Android, Gmail iOS: Partial. The
var()function is supported, but not the variable declaration. Partial. Not supported with non Google accounts.
Caveats as recorded by caniemail (MIT), one entry per wording.
How custom-properties behaves
CSS custom properties (commonly known as CSS variables) allow designers to store reusable values like brand colors, spacing units, and font stacks under custom identifiers prefixed with double hyphens (--*). In web design, custom properties streamline dark-mode theming and design systems. In HTML email, however, custom properties face severe limitations: Gmail and Outlook Classic strip variable definitions, making raw CSS variables dangerous without rigid fallback declarations.
- Gmail (Web and mobile apps) strips custom property declarations (--var-name: value) from <style> blocks and inline attributes.
- Outlook Classic does not support CSS variables; any rule relying solely on var(--token) is dropped by the Word rendering engine.
- Apple Mail, Thunderbird, and Samsung Mail have full, robust support for custom properties and runtime variable resolution.
Questions
Can I use CSS variables in Gmail?
No. Gmail sanitizes and strips custom property definitions from emails. Always provide static inlined fallback styles directly before any var() reference.
How do I provide a safe fallback for CSS variables in email?
Declare the static CSS property first, followed by the variable declaration containing a default value: background-color: #ffffff; background-color: var(--surface-bg, #ffffff);.
Your next question
- Does word-break work in Outlook Classic?
Works in 4 of 21 · partial in 12 · not supported in 5
fix - Does display:flex work in Outlook Classic?
Works in 18 of 21 · partial in 2 · not supported in 1
fix - Does display:grid work in Outlook Classic?
Works in 18 of 21 · partial in 2 · not supported in 1
fix - Does border-spacing work in Outlook Classic?
Works in 17 of 21 · not supported in 2 · 2 untested
fix - Does border-radius work in Outlook Classic?
Works in 16 of 21 · partial in 4 · not supported in 1
fix - Does visibility work in Outlook Classic?
Works in 13 of 21 · not supported in 8
fix
Every feature in Outlook Classic · All email CSS features · What real installs show
Paste your email
Get new email CSS fixes by email.