White text on gradient button gets inverted in Gmail mobile dark mode

I'm having trouble with an HTML email button that has a dark gradient background and white text. The button displays correctly in most email clients, but Gmail's mobile apps (iOS and Android) are inverting the text color in dark mode, making it unreadable.

Current code

Here's what I'm working with:

<a href="#" style="
  background: linear-gradient(135deg, #334D40 0%, #2a3d33 100%);
  color: #ffffff;
  padding: 16px 32px;
  text-decoration: none;
">
  Confirm Your Email
</a>

This works fine in desktop Gmail (light and dark mode) and Apple Mail, but fails in Gmail mobile apps.

The issue

Gmail mobile apps ignore color: #ffffff !important and force the white text to become black in dark mode. This makes the text invisible against the dark gradient background.

What I've tried

Using !important on color properties
Different color formats (hex, rgb, hsl)
-webkit-text-fill-color
text-shadow with color: transparent
background-clip: text (worked on iOS but broke Android)

None of these approaches work consistently across both mobile platforms.

Working solution

After extensive testing, I found that you need a multi-layered approach. The key is using a mobile-first strategy with mix-blend-mode and then resetting it for webmail clients.

Step 1: Add CSS to your email head

<style>
/* Reset for webmail clients */
@media screen and (min-width: 601px) {
    .web-reset-wrapper {
        background: transparent !important;
        mix-blend-mode: normal !important;
    }
    .web-reset-text {
        color: #ffffff !important;
        mix-blend-mode: normal !important;
    }
}

/* Android Gmail fix */
u ~ div .android-fix-wrapper {
    background: transparent !important;
    mix-blend-mode: normal !important;
}
u ~ div .android-fix-text {
    color: #ffffff !important;
    mix-blend-mode: normal !important;
}
</style>

Step 2: Updated button HTML

<div style="text-align: center;">
  <!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://example.com" style="height:55px;v-text-anchor:middle;width:300px;" arcsize="10%" strokecolor="#334D40" fillcolor="#2a3d33">
      <v:fill type="gradient" color="#334D40" color2="#2a3d33" angle="135" />
      <w:anchorlock/>
      <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
        Confirm Your Email
      </center>
    </v:roundrect>
  <![endif]-->
  
  <a href="http://example.com" style="
    background: linear-gradient(135deg, #334D40 0%, #2a3d33 100%) !important;
    border-radius: 6px;
    color: #ffffff !important;
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    min-width: 250px;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none !important;
    mso-hide: all;
  ">
    <span class="web-reset-wrapper android-fix-wrapper" style="background-color: #ffffff; mix-blend-mode: lighten; display: inline-block;">
      <span class="web-reset-text android-fix-text" style="color: #000000; mix-blend-mode: exclusion; display: inline-block;">
        Confirm Your Email
      </span>
    </span>
  </a>
</div>

How it works

The solution uses nested spans with mix-blend-mode to force white text on mobile Gmail apps. The outer span uses lighten blend mode with a white background, and the inner span uses exclusion blend mode with black text.

For webmail clients, the CSS media query detects larger screens and resets the blend modes back to normal, allowing the standard white text to display correctly.

The Android-specific selector u ~ div handles quirks in Gmail's Android app rendering.

This approach has been tested across multiple email clients and provides consistent results for gradient buttons in dark mode.

79702044