Gmail
Gmail's web client uses its own rendering engine that aggressively sanitizes HTML. It strips all <style> blocks, rewrites class names with a random prefix, and removes any CSS it deems unsafe. The result: your email must rely on inline styles for every critical declaration.
Gmail is the most popular email client globally with over 1.8 billion users. Its web client is the primary interface for consumer and small-business email.
CSS coverage profile for Gmail
Gmail renders with the Gmail Web engine and supports 122 of 251 tracked CSS and HTML features fully, with 15 partially supported and 114 unsupported. That places it in a moderate coverage band.
A meaningful portion of CSS is unsupported or partially supported. Plan fallbacks for layout-critical features and validate every template before send.
122
Supported
15
Partial
114
Unsupported
251
Total
Key gotchas in Gmail
<style> blocksSee detailsGmail strips all <style> and <link> tags. Only inline CSS survives. This is the single most common cause of broken emails in Gmail.
CSS class namesGmail rewrites class attributes with a random prefix (e.g., class="m_123abc"). Class-based styling from your <style> block won't match after rewriting.
display: flex / gridSee detailsBoth are stripped by Gmail's sanitizer. Use table-based layout for all structural elements.
position: absolute / fixedGmail removes all position declarations except static and relative. No overlay or absolute positioning is possible.
How Gmail renders email
- Gmail's sanitizer is the strictest of any major webmail provider. Whatever survives sanitization is treated as inline-only — every critical declaration must live inside a style attribute on the element it targets.
- Class rewriting prefixes every class with a per-message identifier (e.g., m_-1234567890abcdef_button). Selectors that depend on stable class names break after rewriting; rely on inline styles or attribute-based hooks where possible.
- Gmail honours @media queries inside surviving <style> blocks, but only when those <style> blocks are not stripped — Gmail keeps a small subset, primarily for media-query-driven dark-mode overrides.
- Embedded fonts via @font-face must come from approved hosts (Google Fonts) or be referenced through external link tags that Gmail recognises; otherwise the fallback is system fonts.
Dark mode behaviour in Gmail
Gmail web supports dark mode and auto-inverts colors using its own algorithm. It targets background-color and color properties, often producing unexpected contrast issues. Use the color-scheme meta tag and test explicitly with dark mode simulation.
QA checklist for Gmail
- Always preview with images enabled and disabled — Gmail's image-blocking on first open from unknown senders changes layout dramatically.
- Validate that the inline color and background-color pair survives Gmail's dark-mode auto-inversion.
- Spot-check that critical class-based hooks have inline equivalents, since class rewriting will break any stylesheet-only selectors.
Related clients
HTML Elements40
| Feature | Support |
|---|---|
| <abbr> | Supported |
| <acronym> | Supported |
| <address> | Supported |
| <audio> | Unsupported |
| <base> | Partial |
| <bdi> | Unsupported |
| <blockquote> | Supported |
| <body> | Partial |
| <code> | Supported |
| <del> | Supported |
| <dfn> | Supported |
| <dialog> | Unsupported |
| <div> | Supported |
| <form> | Supported |
| <h1> | Supported |
| <hr> | Supported |
| <img> | Supported |
| <link> | Unsupported |
| <marquee> | Unsupported |
| <meter> | Unsupported |
| <object> | Unsupported |
| <p> | Supported |
| <picture> | Unsupported |
| <pre> | Supported |
| <progress> | Unsupported |
| <rp> | Unsupported |
| <rt> | Unsupported |
| <ruby> | Unsupported |
| <select> | Supported |
| <small> | Supported |
| <span> | Supported |
| <strike> | Supported |
| <strong> | Supported |
| <style> | Partial |
| <svg> | Unsupported |
| <table> | Supported |
| <textarea> | Supported |
| <ul> | Partial |
| <video> | Unsupported |
| <wbr> | Supported |
CSS At-Rules5
| Feature | Support |
|---|---|
| @font-face | Unsupported |
| @import | Unsupported |
| @keyframes | Unsupported |
| @media | Unsupported |
| @supports | Unsupported |
Pseudo-Elements6
| Feature | Support |
|---|---|
| ::after | Unsupported |
| ::before | Unsupported |
| ::first-letter | Unsupported |
| ::first-line | Unsupported |
| ::marker | Unsupported |
| ::placeholder | Unsupported |
Pseudo-Classes & Selectors32
| Feature | Support |
|---|---|
| :adjacent-sibling | Supported |
| :attribute-selector | Partial |
| :chaining | Supported |
| :checked | Unsupported |
| :child-combinator | Supported |
| :class-selector | Supported |
| :descendant-combinator | Supported |
| :first-child | Unsupported |
| :first-of-type | Unsupported |
| :focus | Unsupported |
| :general-sibling | Supported |
| :grouping | Supported |
| :has | Unsupported |
| :hover | Supported |
| :id-selector | Supported |
| :lang | Unsupported |
| :last-child | Unsupported |
| :last-of-type | Unsupported |
| :link | Unsupported |
| :not | Unsupported |
| :nth-child | Unsupported |
| :nth-last-child | Unsupported |
| :nth-of-type | Unsupported |
| :only-child | Unsupported |
| :only-of-type | Unsupported |
| :target | Unsupported |
| :type-selector | Supported |
| :universal-selector | Supported |
| :visited | Unsupported |
| pseudo-class-active | Unsupported |
| pseudo-class-default | Unsupported |
| pseudo-class-nth-last-of-type | Unsupported |
CSS Functions8
| Feature | Support |
|---|---|
| calc | Supported |
| clamp | Supported |
| conic-gradient | Unsupported |
| fit-content | Supported |
| linear-gradient | Supported |
| max | Supported |
| min | Supported |
| radial-gradient | Supported |
CSS Properties160
Test your email across all 15 clients
Preview rendering, catch CSS issues, and get actionable fixes — free.
Try Emailens FreeSupport data last updated Apr 27, 2026 · synced from caniemail.com via @emailens/engine.