Skip to main content
Emailens/Blog
Try Free
Blog
Mar 4, 2026·8 min read

Gmail HTML Email: CSS Support, Limitations, and Workarounds

Gmail has 1.8 billion users and some of the strictest CSS sanitization of any email client. Here's the definitive guide to what survives and what gets stripped.

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:

background-color
border (all properties)
color
font-family
font-size
font-style
font-weight
line-height
margin (all properties)
padding (all properties)
text-align
text-decoration
vertical-align
width / height
max-width / max-height
display: block / inline / inline-block / none

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

CSS properties Gmail strips

<style> blocks

Stripped entirely. All CSS must be inline.

CSS class names

Rewritten with random prefixes. Class-based <style> rules won't match.

display: flex / grid

Stripped by sanitizer. Use tables for layout.

position (absolute/fixed)

Stripped. Only static and relative allowed.

@media queries

Stripped in Gmail mobile apps. Partially supported in Gmail web (class-based only).

@font-face

Stripped. Only system fonts are available.

CSS animations/transitions

Stripped entirely.

background-image

Stripped on most elements.

CSS variables (custom properties)

Not supported.

float

Stripped. Use table alignment instead.

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:

Gmail-safe HTML
<!-- 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

All three strip <style> blocks and require inline CSS for critical styles.

See exactly what Gmail strips from your email

Paste your HTML and get a per-property report of what Gmail supports, strips, and rewrites — with fix suggestions.

Preview your email

Free plan — 30 previews/day