opacity

Client-by-client behaviour for opacity

Fully supports opacity (18): Gmail, Gmail Android, Gmail iOS, Outlook 365, 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, Fastmail, Superhuman.

No support (3): Outlook (New), Outlook Classic, AOL Mail. Plan fallbacks for these clients before relying on opacity in production sends.

When to use opacity in email

• Subtly fading footer disclosure copy without changing color.
• Creating watermark-like effects on hero imagery overlays in modern clients.
• De-emphasizing inactive items in a list of options or links.

Rendering behaviour and edge cases

• Outlook on Windows ignores opacity entirely , design assuming the element will appear at 100% opacity.
• Stacking opacity on parent + child compounds visually, which is rarely the intended effect.
• Use rgba() for color opacity instead of opacity when targeting only a single property's transparency.

Recommended fallback strategy

Use opacity only for progressive enhancement. For solid-feeling color transparency, prefer rgba() values applied directly to background-color or color properties so Outlook still receives a sensible solid color.

Fixes & Workarounds

.overlay {
  background-color: #000;
  opacity: 0.5;
}

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

.overlay {
  background-color: #000;
  opacity: 0.5;
}

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

.overlay {
  background-color: #000;
  opacity: 0.5;
}

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