Skip to main content

Our email CSS engine is open source. Give it a star on GitHub 

Emailens
Sign in

CSS property · data last changed 10 Nov 2026

opacity in email clients

Works in 19 of 21. Not supported in Outlook Classic and AOL Mail.

Your reader in Outlook Classic sees the email without opacity, even if it looks right where you tested it.

caniemail (MIT) via @emailens/engine 0.18.22

The fix for Outlook Classic

Replace opacity with solid color equivalents

after 
.overlay {
  /* Use a semi-transparent color instead of opacity */
  background-color: #808080;
  /* Or for modern clients: rgba(0, 0, 0, 0.5) */
}
Show the original
before 
.overlay {
  background-color: #000;
  opacity: 0.5;
}

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 →

opacity is not among the 24 features we have screenshotted on real installs. The ones we have →

All 21 clients, problems first

ClientSupport
Outlook Classic Not supported
AOL Mail Not supported
Works in 19: Gmail, Gmail Android, Gmail iOS and 16 more. Show all
ClientSupport
Gmail Works
Gmail Android Works
Gmail iOS Works
Outlook 365 Works
Outlook (New) 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
Fastmail Works
Superhuman Works

How opacity behaves

opacity works in every client tracked here except Outlook Classic and AOL Mail, which ignore it and draw the element fully opaque. Faded text shows at full strength there, and anything hidden with opacity: 0 is visible.

  • Outlook Classic and AOL Mail draw the element as if opacity were 1. Never hide content, such as preheader text, with opacity: 0 alone.
  • Gmail keeps inline opacity: we confirmed it in a real Gmail inbox in October 2026. Apple Mail and the new Outlook for Mac also applied it in our real-client check on October 27, 2026.
  • opacity applies to the element and everything inside it, and nested values multiply: 0.5 inside 0.5 shows at 0.25.
  • rgba() is not a way around Outlook Classic, which does not support it either. In Gmail, write rgba() with commas: the space-separated form, such as rgb(0 0 0 / 50%), makes Gmail strip the whole style attribute, or the whole <style> block it sits in.

Pick the solid color the faded element would show on its background and set that color directly. Black at 50% over white is #808080. A solid color reads the same in every client, Outlook Classic and AOL Mail included, because it needs no opacity at all. Keep opacity for effects that can fail without harm, such as an overlay that still reads when fully opaque.

Questions

Does opacity work in Outlook?

In Outlook 365, Outlook (New), Outlook for Mac, Outlook iOS and Outlook Android, yes. Outlook Classic ignores it and draws the element fully opaque, so set the faded color directly.

Does opacity work in Gmail?

Yes, on the web and in the Gmail apps. If you use rgba() instead, write it with commas, because Gmail strips the space-separated rgb(0 0 0 / 50%) form.

Your next question

opacity in Outlook Classic · Every feature in Outlook Classic · All email CSS features · What real installs show

Get new email CSS fixes by email.

caniemail (MIT) via @emailens/engine 0.18.22 · tested upstream 28 Feb 2019 · data last changed 10 Nov 2026 · Outlook (New) cells are the engine's mapping