Gmail HTML Email: CSS Support, Limitations, and Workarounds

How Gmail's sanitizer works

When Gmail receives an HTML email, it runs it through a sanitizer that:

1. Strips all <style> blocks: embedded and linked CSS is removed entirely
2. Rewrites class names: adds a random prefix (e.g., class="m_2931abc") so any surviving class references won't match
3. Filters inline CSS: only whitelisted CSS properties survive. Everything else is removed.
4. Strips scripts and forms: no JavaScript, no form elements, no interactive HTML

The practical consequence: your email must look correct using only inline CSS from Gmail's whitelist.

CSS properties that work in Gmail

These inline CSS properties survive Gmail's sanitizer:

For the full compatibility matrix, see the Gmail CSS support reference.

CSS properties Gmail strips

Gmail-safe email template

Here's a complete email structure that survives Gmail's sanitizer. Every style is inline, layout uses tables, and no declaration depends on <style> blocks:

<!-- This email survives Gmail's sanitizer -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0"
  style="background-color: #f6f6f6;">
  <tr>
    <td align="center" style="padding: 40px 20px;">
      <table role="presentation" cellpadding="0" cellspacing="0"
        style="background-color: #ffffff; max-width: 600px; width: 100%;">
        <tr>
          <td style="padding: 30px;">
            <!-- Every style is inline , nothing depends on <style> -->
            <img src="https://example.com/logo.png"
              alt="Company" width="120" height="36"
              style="display: block; border: 0;" />

            <p style="margin: 24px 0 16px; font-family: Arial, sans-serif;
              font-size: 24px; font-weight: bold; color: #333333;">
              Welcome!
            </p>

            <p style="margin: 0 0 24px; font-family: Arial, sans-serif;
              font-size: 14px; line-height: 1.6; color: #666666;">
              Your content here. Every text element has its own
              font-family declaration because Gmail doesn't inherit
              reliably.
            </p>

            <!-- Button as a table cell (not a styled <a>) -->
            <table role="presentation" cellpadding="0" cellspacing="0">
              <tr>
                <td style="background-color: #000; border-radius: 6px;">
                  <a href="https://example.com"
                    style="display: inline-block; padding: 12px 24px;
                    font-family: Arial, sans-serif; font-size: 14px;
                    color: #ffffff; text-decoration: none;">
                    Get Started
                  </a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Dark mode in Gmail

Gmail applies automatic dark mode color inversion on Android and in the web client (when the user has dark mode enabled). The algorithm:

• Light backgrounds are converted to dark backgrounds
• Dark text is converted to light text
• Images are not inverted (but transparent PNGs with dark content may become invisible)
• You cannot opt out. Gmail doesn't respect the color-scheme meta tag

The safest approach: design with sufficient contrast in both modes, avoid transparent PNGs for critical content, and test with Emailens's dark mode simulation.

Gmail across platforms

Gmail's rendering differs between platforms:

• Gmail Web, supports some class-based media queries (partial)
• Gmail Android, strips all media queries, auto-applies dark mode
• Gmail iOS, similar restrictions to Android, with WebKit influence on rendering

Gmail web also injects an empty <u></u> before the body class, which is why u + .body can style Gmail without Outlook matching the rule. That pattern, the Android variant, and which hacks are dead are in email client targeting CSS.

Critical CSS still has to be inline. Targeting selectors such as u + .body live in a <style> block Gmail web keeps (with a size cap). They do not replace inlining, and they do not apply in Outlook.

Related deep dives: Learn how to prevent Gmail 102KB email clipping, tame forced color inversion in our Dark Mode Email CSS guide, automate styling with CSS inlining for email, Gmail u + .body targeting, and why modern utility builds run into Tailwind v4 Gmail breakpoint bugs.