Email Gmail CSS

Definition

Gmail CSS refers to the specific set of CSS properties and selectors that Gmail supports in HTML emails. Gmail is one of the most restrictive major email clients, with unique CSS handling rules that differ between Gmail web, Gmail mobile (Android), and the Gmail app on iOS. Understanding Gmail's CSS limitations is critical because Gmail accounts for approximately 25–30% of email opens across all industries.

Gmail strips <style> and <link> tags from email HTML, with one important exception: @media queries inside <style> tags are preserved in Gmail mobile apps and Gmail web (since 2018). This means that most CSS must be inlined directly on HTML elements using the style attribute. Properties that are not inlined are lost. Gmail also removes class and ID selectors from any remaining <style> blocks, so embedded rules must use simple selectors or be inlined.

Certain CSS properties are completely unsupported in Gmail. These include position (absolute, relative, fixed), float, margin (on some elements), z-index, overflow, visibility, and advanced selectors like :before, :after, :hover, and :focus. Background images on divs are supported in Gmail web but not in Gmail mobile apps. border-radius, padding, font-size, color, and background-color are generally safe.

Best Practices

Inline all critical CSS directly on HTML elements using the style attribute. Do not rely on <style> blocks for essential layout styles because Gmail web may strip them.

Use @media queries inside <style> tags for responsive design. Gmail supports media queries as of 2018, but keep selectors simple and avoid complex combinators that Gmail might strip.

Avoid CSS properties that Gmail does not support. Check a current Gmail CSS support reference before using float, position, margin, or display properties that may render inconsistently.

Test in all three Gmail environments: Gmail web (Chrome, Firefox, Safari), Gmail for Android (app), and Gmail for iOS (app). Each environment handles CSS differently, especially media queries and background images.

Set width explicitly on images and tables rather than relying on CSS max-width. Gmail web respects max-width inconsistently, and some versions interpret it as the element's actual rendered width.