Gmail CSS Support: What Gmail Keeps, Strips and Rewrites

How Gmail's sanitizer handles your CSS

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

1. Keeps one head <style> block, with limits: a block in the <body> or over 16KB is removed whole, and external <link> stylesheets are always removed
2. Rewrites class names: adds a per-message prefix (e.g., class="m_2931abc") and rewrites your selectors to match
3. Filters CSS properties: unsupported ones such as position and animation are removed, inline or not
4. Strips scripts: no JavaScript runs

The apps add one condition: for an account that is not a Google account, the iOS and Android apps remove the <style> block and media queries too. Inline styles are the only thing guaranteed to reach every Gmail reader.

The 16KB cap on the <style> block is separate from the 102KB limit on the whole message, past which Gmail clips the email behind a “[Message clipped]” link. What counts toward that limit and how to stay under it is in Gmail clipping at 102KB.

Gmail CSS support: properties that work inline

These inline CSS properties survive Gmail's sanitizer:

• Worksbackground-color works in Gmail.
• Worksborder works in Gmail.
• Workscolor works in Gmail.
• Worksfont-family works in Gmail.
• Worksfont-size works in Gmail.
• Worksfont-weight works in Gmail.
• Worksline-height works in Gmail.
• Workspadding works in Gmail.
• Workstext-align works in Gmail.
• Workswidth works in Gmail.
• Worksmax-width works in Gmail.

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

CSS that Gmail strips or limits

• Partial<style> is partly supported in Gmail.Kept in the <head> up to 16KB. Removed when in the <body> or over the limit, and removed entirely in the apps for non-Google accounts.
• Not supported<link> is not supported in Gmail.External stylesheets are always removed.
• Partial@media is partly supported in Gmail.Height-based queries are not supported. Removed in the apps for non-Google accounts.
• Partialmargin is partly supported in Gmail.Negative values are not supported.
• Not supportedposition is not supported in Gmail.Overlays fall back into normal flow.
• Not supported@font-face is not supported in Gmail.Only system fonts are available.
• Not supported@media prefers-color-scheme is not supported in Gmail.Dark-mode media queries never apply.

A 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 web leaves your email's colours alone when its interface goes dark; the iOS and Android apps recolour light backgrounds and dark text themselves. @media (prefers-color-scheme) does not apply anywhere in Gmail. What each app does and how to protect your colours and logo are in the dark mode email guide.

Gmail web vs the Gmail iOS and Android apps

Which CSS reaches the reader depends on the Gmail app and the account type:

• Gmail Web, keeps a head style block (16KB cap) and supports media queries, flexbox and grid
• Gmail Android, same as the web for Google accounts; inline styles only for other accounts
• Gmail iOS, same account rule as Android

To style Gmail alone, Gmail web injects an empty <u></u> before your body class, so a u + .body rule in the kept <style> block applies in Gmail and not in Outlook. It does not replace inlining. The selector, its Android variant and the hacks that no longer match are in email client targeting CSS.