opacity

Client-by-client behaviour for opacity

Fully supports opacity (13): Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook iOS, Outlook Android, Apple Mail, Apple Mail iOS, Yahoo Mail, Samsung Mail, Thunderbird, HEY Mail, Superhuman.

No support (2): Outlook (New), Outlook Classic. 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) */
}