Previewing Gmail with Emailens

Looking for the full per-feature CSS support data rather than how the preview works? See the Full CSS support reference on emailens.dev.

Gmail is one of the most restrictive email clients for CSS support. Emailens covers three Gmail variants.

Variants

All three support dark mode, but behave differently: Gmail Web only darkens the UI chrome (email content is unchanged), Gmail iOS applies full color inversion, and Gmail Android applies partial inversion.

Key behaviors

• Keeps one <style> block, with limits , a <style> in the <head> is kept up to 16KB. One in the <body> or over the limit is removed whole, and the iOS and Android apps remove it for non-Google accounts. Inline anything critical.
• Rewrites class names , classes get a per-message prefix, and selectors in your <style> block are rewritten to match, so ordinary class rules keep working.
• Flexbox and grid , supported on the web; in the apps, only for Google accounts. Tables remain the layout that reaches every reader.
• No position , position: relative/absolute/fixed is stripped.
• No box-shadow on the web , removed on the web; the apps support it partly.
• background-image , kept; set a background-color behind it for clients that block images.
• Limited margin , negative margins and margin on certain elements are unreliable.

Recommendations

1. Use inline styles for all critical styling
2. Use table-based layouts instead of flexbox/grid
3. Put a solid background color behind every background image
4. Test both light and dark mode variants