Gmail Android email CSS: what breaks, and what to write instead

109 of 300 features work in Gmail Android · 66 partial · 125 not supported. Its closest client, Gmail iOS, agrees on 273 of the 300 features both are tested on.

Works 109 · Partial 66 · Not supported 125 · Untested 0 · of 300

Gmail Mobile · mobile · prefers-color-scheme: not supported

Check your email, free

No signup · Five clients free, Outlook Classic included · All 21 with an account

The checker needs a computer screen.

See what breaks ↓

Gmail Android opens with a free account.

A free account opens all 21 clients and keeps your checks for 7 days. Create a free account →

@emailens/engine 0.18.22 · data last changed 10 Nov 2026

Where Gmail Android is the outlier

1 feature work in at least 14 of the other 20 clients and is not supported here.

So an email that looks right in most clients can reach your reader in Gmail Android without them.

z-index
Works in 17 of 21 · not supported in 4
· not supported here

What to write instead

10 features Gmail Android does not fully support have a written fix. See them in the table ↓

visibility

The fix for Gmail Android

Use conditional comments or remove hidden content

after

5 lines

<!-- For screen readers, use font-size: 0 trick -->
<div style="font-size: 0; max-height: 0; overflow: hidden;
            mso-hide: all;" aria-hidden="true">
  Preheader text
</div>

Show the original

before

3 lines

<div style="visibility: hidden;">
  Hidden content for screen readers
</div>

Test this fix, free

Gmail Android opens with a free account; the checker shows five clients without one.

The checker needs a computer screen.

text-shadow

The fix for Gmail Android

Use font-weight or border-bottom as alternatives to text-shadow

after

6 lines

.glow {
  /* text-shadow is not supported in Gmail, Outlook, Yahoo.
     Use font-weight or letter-spacing for emphasis instead. */
  font-weight: bold;
  letter-spacing: 0.5px;
}

Show the original

before

3 lines

.glow {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

Test this fix, free

Gmail Android opens with a free account; the checker shows five clients without one.

The checker needs a computer screen.

transform

The fix for Gmail Android

Pre-render transformed states as images or use table layout

The engine still flags this in the fix: An image points to an address no inbox can load (rotated-content.png), so Gmail Android shows a broken image instead.

after

4 lines

<!-- Pre-render rotated content as an image -->
<img src="rotated-content.png" width="200" height="200"
  alt="Rotated content"
  style="display: block; border: 0;" />

Show the original

before

3 lines

<div style="transform: rotate(45deg);">
  Rotated content
</div>

Test this fix, free

Gmail Android opens with a free account; the checker shows five clients without one.

The checker needs a computer screen.

Paste your email and see what Gmail Android does to it.

Check your email, free

No signup · Five clients free, Outlook Classic included · All 21 with an account

The checker needs a computer screen.

Dark mode in Gmail Android

Not supported @media prefers-color-scheme is not supported in Gmail Android.

Works in 9 of 21.
Not supported color-scheme is not supported in Gmail Android.

Works in 4 of 21.
Partial meta-color-scheme is partly supported in Gmail Android.

Works in 2 of 21.

How to target Gmail Android

Selectors that single out Gmail Android, from the community list the engine ships (howtotarget.email). Copy one and replace .your-class-name.

css

3 lines

div > u + .body .your-class-name {
  /* Replace this comment with your styles */
}

Gmail changes the doctype to <u></u>.

No longer works (2)

css

3 lines

_:-webkit-full-screen, :root .your-class-name {
  /* Replace this comment with your styles */
}

css

5 lines

@media screen and (pointer) { 
  .your-class-name {
    /* Replace this comment with your styles */
  }
}

Build one for several clients →

Before you send to Gmail Android

Test with both a Gmail address and a non-Google address in the app. They are the two renderings your Android Gmail readers actually get.
Check the layout at common Android widths (360px, 412px) with the media queries removed, since that is what non-Google accounts see.
Keep buttons at least 44px tall for comfortable tapping.

Your next question

Gmail · Gmail iOS

Every feature in Gmail Android

What breaks here (191) Everything (300)

HTML Elements · 19 of 48 not supported or partial here

<abbr> Works Works in 14 of 21
<acronym> Works Works in 13 of 21
<address> Works Works in 20 of 21
<audio> Not supported Works in 4 of 21
<base> Buggy. Partial Works in 4 of 21
<bdi> Not supported Works in 6 of 21
<blockquote> Works Works in 19 of 21
<body> Partial. Partial Works in 5 of 21
<button type="reset"> Works Works in 10 of 21
<button type="submit"> Works Works in 11 of 21
<code> Works Works in 20 of 21
<del> Works Works in 20 of 21
<dfn> Works Works in 17 of 21
<dialog> Works Works in 5 of 21
<div> Works Works in 20 of 21
<form> Works Works in 10 of 21
<h1> Works Works in 20 of 21
<hr> Works Works in 18 of 21
<img> Works Works in 19 of 21
<input type="checkbox"> Works Works in 16 of 21
<input type="hidden"> Works Works in 16 of 21
<input type="radio"> Works Works in 16 of 21
<input type="reset"> Works Works in 15 of 21
<input type="submit"> Works Works in 12 of 21
<input type="text"> Works Works in 13 of 21
<link> fix Not supported Works in 3 of 21
<marquee> Not supported Works in 8 of 21
<meter> Partial. Partial Works in 11 of 21
<object> Not supported Works in 1 of 21
<p> Works Works in 20 of 21
<picture> <picture> and <source> tags are replaced by <u></u> tags. Not supported Works in 4 of 21
<pre> Works Works in 20 of 21
<progress> Partial. Partial Works in 6 of 21
<rp> Partial. Partial Works in 15 of 21
<rt> Partial. Partial Works in 15 of 21
<ruby> Partial. Partial Works in 15 of 21
<select> Works Works in 14 of 21
<small> Works Works in 20 of 21
<span> Works Works in 20 of 21
<strike> Partial. Partial Works in 17 of 21
<strong> Works Works in 20 of 21
<style> Partial. Partial Works in 16 of 21
<svg> fix Not supported Works in 5 of 21
<table> Works Works in 20 of 21
<textarea> Works Works in 13 of 21
<ul> Partial. Partial Works in 7 of 21
<video> fix <video>, <source> and <track> tags are replaced by <u></u> tags. Not supported Works in 3 of 21
<wbr> Partial. Partial Works in 16 of 21

HTML Attributes · 10 of 22 not supported or partial here

[align] Works Works in 17 of 21
[aria-describedby] Not supported Works in 9 of 21
[aria-hidden] Works Works in 13 of 21
[aria-label] Works Works in 13 of 21
[aria-labelledby] Buggy. Not supported Works in 7 of 21
[aria-live] Works Works in 8 of 21
[background] Partial. Partial Works in 16 of 21
[cellpadding] Works Works in 18 of 21
[cellspacing] Works Works in 18 of 21
[command] Not supported Works in 3 of 21
[dir] Works Works in 19 of 21
[height] Works Works in 18 of 21
[hidden] Not supported Works in 5 of 21
[lang] Works Works in 15 of 21
[loading] Not supported Works in 4 of 21
[popover] Not supported Works in 3 of 21
[required] Partial. Partial Works in 7 of 21
[role] Works Works in 14 of 21
[srcset] Not supported Works in 4 of 21
[target] Not supported. Not supported Works in 0 of 21
[valign] Works Works in 20 of 21
[width] Works Works in 18 of 21

HTML & Email Structure · 2 of 8 not supported or partial here

amp4email Works Works in 6 of 21
anchor-links Works Works in 12 of 21
doctype Works Works in 13 of 21
html-comments Works Works in 18 of 21
html5-semantics Partial. Partial Works in 6 of 21
image-maps Works Works in 15 of 21
mailto-links Works Works in 17 of 21
meta-color-scheme Partial support. Partial Works in 2 of 21

CSS At-Rules · 9 of 10 not supported or partial here

@font-face Not supported Works in 6 of 21
@import Not supported Works in 4 of 21
@keyframes Not supported Works in 7 of 21
@media Partial. Partial Works in 5 of 21
@media device-pixel-ratio Not supported Works in 10 of 21
@media hover Not supported Works in 9 of 21
@media orientation Works Works in 11 of 21
@media prefers-color-scheme Not supported Works in 9 of 21
@media prefers-reduced-motion Not supported Works in 9 of 21
@supports Not supported Works in 9 of 21

Pseudo-Elements · 6 of 6 not supported or partial here

::after Not supported Works in 6 of 21
::before Not supported Works in 6 of 21
::first-letter Not supported Works in 10 of 21
::first-line Not supported Works in 10 of 21
::marker Not supported Works in 10 of 21
::placeholder Not supported Works in 9 of 21

Pseudo-Classes & Selectors · 34 of 34 not supported or partial here

:adjacent-sibling Partial. Partial Works in 16 of 21
:attribute-selector Partial. Partial Works in 6 of 21
:chaining Partial. Partial Works in 14 of 21
:checked Not supported Works in 9 of 21
:child-combinator Partial. Partial Works in 16 of 21
:class-selector Partial. Partial Works in 17 of 21
:descendant-combinator Partial. Partial Works in 17 of 21
:first-child Not supported Works in 12 of 21
:first-of-type Not supported Works in 12 of 21
:focus Not supported Works in 10 of 21
:focus-visible Not supported Works in 6 of 21
:focus-within Not supported Works in 6 of 21
:general-sibling Partial. Partial Works in 16 of 21
:grouping Partial. Partial Works in 17 of 21
:has Not supported Works in 5 of 21
:hover Partial. Partial Works in 12 of 21
:id-selector Partial. Partial Works in 17 of 21
:lang Not supported Works in 6 of 21
:last-child Not supported Works in 12 of 21
:last-of-type Not supported Works in 12 of 21
:link Not supported Works in 13 of 21
:not Not supported Works in 6 of 21
:nth-child Not supported Works in 6 of 21
:nth-last-child Not supported Works in 6 of 21
:nth-of-type Not supported Works in 6 of 21
:only-child Not supported Works in 12 of 21
:only-of-type Not supported Works in 12 of 21
:target Not supported Works in 7 of 21
:type-selector Partial. Partial Works in 17 of 21
:universal-selector Partial. Partial Works in 16 of 21
:visited Not supported Works in 8 of 21
pseudo-class-active Not supported Works in 8 of 21
pseudo-class-default Not supported Works in 10 of 21
pseudo-class-nth-last-of-type Not supported Works in 6 of 21

CSS Functions · 7 of 8 not supported or partial here

calc Partial. Partial Works in 8 of 21
clamp Partial. Partial Works in 6 of 21
conic-gradient Not supported Works in 6 of 21
fit-content Works Works in 11 of 21
linear-gradient Buggy. Partial Works in 9 of 21
max Partial. Partial Works in 6 of 21
min Partial. Partial Works in 6 of 21
radial-gradient Buggy. Partial Works in 10 of 21

CSS Properties · 104 of 164 not supported or partial here

!important Partial. Partial Works in 11 of 21
accent-color Not supported Works in 5 of 21
align-items Not supported Works in 13 of 21
animation fix Not supported Works in 5 of 21
aspect-ratio Not supported Works in 5 of 21
backdrop-filter Not supported Works in 6 of 21
background Works Works in 16 of 21
background-blend-mode Partial. Partial Works in 13 of 21
background-clip Partial. Partial Works in 14 of 21
background-color Works Works in 21 of 21
background-image Works Works in 16 of 21
background-origin Partial Works in 14 of 21
background-position Works Works in 20 of 21
background-repeat Works Works in 20 of 21
background-size Partial. Partial Works in 17 of 21
bimi Works Works in 9 of 21
block-size Not supported Works in 7 of 21
border Works Works in 20 of 21
border-collapse Works Works in 19 of 21
border-image Not supported Works in 7 of 21
border-inline Not supported Works in 3 of 21
border-inline-individual Not supported Works in 3 of 21
border-inline-longhand Not supported Works in 4 of 21
border-radius Works Works in 16 of 21
border-radius-logical Not supported Works in 3 of 21
border-spacing Works Works in 17 of 21
bottom Not supported Works in 11 of 21
box-shadow Partial. Partial Works in 14 of 21
box-sizing Works Works in 16 of 21
caption-side Works Works in 20 of 21
clear Partial. Partial Works in 9 of 21
clip-path Not supported Works in 8 of 21
color Works Works in 21 of 21
color-scheme Not supported Works in 4 of 21
column-count Works Works in 16 of 21
columns Works Works in 16 of 21
css-comments Partial. Partial Works in 14 of 21
cursor Cursor property is removed. Not supported Works in 2 of 21
custom-properties Partial. Not supported Works in 6 of 21
direction Works Works in 21 of 21
display Partial. Partial Works in 13 of 21
display:flex Not supported with non Google accounts. Partial Works in 18 of 21
display:grid fix Not supported with non Google accounts. Partial Works in 18 of 21
display:none Works Works in 20 of 21
empty-cells Works Works in 14 of 21
filter Not supported Works in 7 of 21
flex Not supported Works in 13 of 21
flex-basis Not supported Works in 13 of 21
flex-direction Not supported Works in 12 of 21
flex-wrap Not supported Works in 13 of 21
float Partial. Partial Works in 14 of 21
font Works Works in 20 of 21
font-family Works Works in 21 of 21
font-kerning Works Works in 13 of 21
font-size Works Works in 13 of 21
font-size-adjust Not supported with non Google accounts. Partial Works in 10 of 21
font-stretch Not supported Works in 10 of 21
font-weight Works Works in 16 of 21
gap Partial. Partial Works in 7 of 21
grid-template-columns Not supported Works in 7 of 21
height Works Works in 16 of 21
hyphenate-character Not supported Works in 4 of 21
hyphenate-limit-chars Not supported Works in 1 of 21
hyphens Not supported Works in 4 of 21
inert Not supported Works in 3 of 21
inline-size Not supported Works in 4 of 21
inset Not supported Works in 3 of 21
justify-content Not supported Works in 13 of 21
left Not supported Works in 11 of 21
letter-spacing Works Works in 20 of 21
light-dark Not supported Works in 3 of 21
line-height Works Works in 20 of 21
list-style list-style-image values are not supported. Partial Works in 11 of 21
list-style-image Not supported Works in 6 of 21
list-style-position Works Works in 19 of 21
list-style-type Works Works in 21 of 21
margin Partial. Partial Works in 8 of 21
margin-block-start-end Not supported Works in 4 of 21
margin-inline-block Not supported Works in 6 of 21
margin-inline-start-end Not supported Works in 4 of 21
mask-image Not supported Works in 4 of 21
max-block-size Not supported Works in 5 of 21
max-height Works Works in 20 of 21
max-inline-size Not supported Works in 4 of 21
max-width Works Works in 20 of 21
min-block-size Not supported Works in 4 of 21
min-height Works Works in 19 of 21
min-inline-size Not supported Works in 5 of 21
min-width Works Works in 20 of 21
mix-blend-mode Partial. Partial Works in 13 of 21
modern-color Using this syntax for an inline style will remove all inline styles applied to that element. Not supported Works in 4 of 21
nesting Not supported Works in 2 of 21
object-fit Partial. Partial Works in 14 of 21
object-position Partial. Partial Works in 14 of 21
opacity Works Works in 19 of 21
orphans Not supported, but Gmail's default styles on the email message container includes the orphans property. Not supported Works in 10 of 21
outline Works Works in 20 of 21
outline-offset Not supported Works in 7 of 21
overflow Buggy. Partial Works in 4 of 21
overflow-wrap fix Not supported Works in 2 of 21
padding Works Works in 20 of 21
padding-block-start-end Not supported Works in 4 of 21
padding-inline-block Not supported Works in 3 of 21
padding-inline-start-end Not supported Works in 4 of 21
position fix Not supported Works in 2 of 21
resize Not supported Works in 1 of 21
rgb Whitespace syntax is not supported (rgb(0 128 0 / 1)). Partial Works in 12 of 21
rgba Whitespace syntax is not supported (rgb(0 128 0 / 1)). Partial Works in 12 of 21
right Not supported Works in 11 of 21
scroll-snap Not supported Works in 6 of 21
shape-margin Not supported Works in 6 of 21
shape-outside Not supported Works in 6 of 21
system-ui Partial. Partial Works in 12 of 21
tab-size Not supported Works in 8 of 21
table-layout Works Works in 16 of 21
text-align Partial. Partial Works in 13 of 21
text-align-last Works Works in 7 of 21
text-decoration Partial. Partial Works in 14 of 21
text-decoration-color Partial. Partial Works in 17 of 21
text-decoration-line Works Works in 16 of 21
text-decoration-skip-ink Not supported Works in 7 of 21
text-decoration-style Works Works in 16 of 21
text-decoration-thickness Not supported Works in 7 of 21
text-emphasis Not supported Works in 9 of 21
text-emphasis-position Not supported Works in 4 of 21
text-indent Partial. Partial Works in 13 of 21
text-justify Buggy. Not supported Works in 0 of 21
text-orientation Works Works in 13 of 21
text-overflow Partial. Partial Works in 13 of 21
text-shadow fix Not supported Works in 12 of 21
text-transform Works Works in 20 of 21
text-underline-offset Not supported Works in 7 of 21
text-underline-position Works Works in 8 of 21
text-wrap Not supported Works in 4 of 21
top Not supported Works in 11 of 21
transform fix Not supported Works in 7 of 21
transition Not supported Works in 4 of 21
unit-ch Works Works in 15 of 21
unit-cm Works Works in 20 of 21
unit-em Works Works in 20 of 21
unit-ex Works Works in 20 of 21
unit-in Works Works in 20 of 21
unit-initial Partial. Partial Works in 12 of 21
unit-mm Works Works in 20 of 21
unit-pc Works Works in 20 of 21
unit-percent Works Works in 20 of 21
unit-pt Works Works in 20 of 21
unit-px Works Works in 20 of 21
unit-rem Works Works in 15 of 21
unit-vh Works Works in 17 of 21
unit-vmax Works Works in 15 of 21
unit-vmin Works Works in 15 of 21
unit-vw Works Works in 18 of 21
user-select Not supported Works in 3 of 21
vertical-align Works Works in 21 of 21
visibility fix Not supported Works in 13 of 21
white-space Partial. Partial Works in 15 of 21
white-space-collapse Not supported Works in 4 of 21
widows Not supported, but Gmail's default styles on the email message container includes the widows property. Not supported Works in 10 of 21
width Works Works in 20 of 21
word-break Buggy. Partial Works in 4 of 21
word-spacing Works Works in 14 of 21
writing-mode Partial. Partial Works in 13 of 21
z-index Not supported Works in 17 of 21

How Gmail Android renders email

Gmail on Android applies the same sanitising as Gmail on the web for Google accounts: a <style> block in the <head> is kept and media queries other than height-based ones work. The difference is accounts. When the app is used to read a non-Google account, such as an Outlook.com or Yahoo address, it drops <style> blocks, media queries and flexbox, and only inline styles reach the reader.

<style> blocks: Kept in the <head> for Google accounts. Removed for non-Google accounts read in the app, so anything critical must also be inline.
@media queries: Supported for Google accounts, except height-based queries. Ignored for non-Google accounts, so a layout must still work at phone width without its breakpoints.
@font-face: Not supported. Always end a font stack in a system font.

Because the Gmail app also reads other providers' mail, one audience can see two renderings: Google accounts get your <style> block and breakpoints, everyone else gets inline styles only. Fluid widths (percentage widths with a max-width) are the layout that holds up in both.
Flexbox is supported for Google accounts and not for others, for the same reason. Tables remain the safe structure.
Touch is the only input, so hover states never show. Buttons must look complete in their resting state.