Gmail (Web + Mobile)

Gmail uses a browser engine (Blink on web, WebKit on iOS) but applies its own HTML sanitization pass before rendering. The most impactful quirk: Gmail strips <style> from <head> in many contexts.

The <style> in <head> Problem

Gmail (web, non-Google Apps accounts) historically stripped the entire <style> block from <head>. Gmail has improved this over time and now supports <style> in some configurations, but it is unreliable across all Gmail contexts (mobile app, web, third-party clients accessing Gmail via IMAP).

Fix: Inline all critical styles using the style attribute on each element. Use a CSS inliner tool (e.g. Juice, Premailer) to automate this step.

<!-- Risky in Gmail: -->
<style>.button { background: blue; color: white; }</style>
<a class="button" href="#">Click</a>

<!-- Safe in Gmail: -->
<a style="background:blue;color:white;padding:12px 24px;text-decoration:none;" href="#">Click</a>

Not supported. <link rel="stylesheet"> is always stripped. Never rely on external CSS files in email.

CSS Variables

Not supported. var() and custom property declarations are stripped. Inline all values.

Web Fonts

Partial support. Gmail supports some web fonts via @import inside a <style> block in the body, but this is unreliable. Always declare system-font fallbacks:

font-family: 'Your Font', Arial, sans-serif;

Media Queries

Partial support. The Gmail app on Android supports media queries; the web client has limited support. Don't rely on media queries as your only responsive strategy — use fluid tables and percentage widths as the base.

SVG

Partial support. Inline SVG is supported in some Gmail contexts but stripped in others. Use <img> with PNG/WebP fallbacks for icons and illustrations.

Flexbox

Supported in Gmail's web rendering context — but since styles must be inlined, you need style="display:flex" on each element. This gets verbose. Tables remain simpler for complex layouts.

Key Takeaways

  • Inline all critical CSS — don't rely on <style> in <head>
  • No external stylesheets
  • No CSS variables
  • Always declare font fallback stacks
  • Use tables or inlined flexbox for layout
  • Provide PNG/WebP fallbacks instead of inline SVG