Gmail
Gmail is one of the most popular email clients. Gmail supports many modern CSS features on desktop, web, mobile, and through apps.
About Gmail
Gmail is one of the most popular email clients in the world, with over 1.5 billion users. It powers both webmail and native mobile apps on iOS and Android. Gmail's CSS support is reasonably modern compared to other email clients, though it still has some limitations.
CSS & Design Tips
- Gmail strips out font-face declarations and embedded stylesheets in some cases; use inline styles when possible
- Gmail supports media queries on desktop webmail, making responsive emails possible
- The mobile app has better CSS support than the webmail version in some cases
- Gmail does not support CSS floats reliably; use display: inline-block or flexbox alternatives
- Background images work but may not display consistently in all Gmail environments
Best Practices
When designing for Gmail, always test your emails in the actual client before deployment. CSS support can vary between versions and platforms. Use progressive enhancement techniques and provide solid fallbacks for unsupported features.
Supported Features
background-color
css
border-collapse
css
border-radius
css
border-spacing
css
border
css
caption-side
css
css column properties
css
empty-cells
css
font-kerning
css
font-size
css
font-weight
css
height property
css
letter-spacing
css
line-height
css
list-style-position
css
list-style-type
css
max-height property
css
max-width
css
min-height property
css
min-width property
css
outline
css
padding
css
table-layout
css
text-align-last
css
text-transform
css
ch unit
css
cm unit
css
em unit
css
ex unit
css
in unit
css
mm unit
css
pc unit
css
% unit
css
pt unit
css
px unit
css
rem unit
css
vh unit
css
vmax unit
css
vmin unit
css
vw unit
css
vertical-align
css
width property
css
word-spacing
css
Partial Support Features
@media (orientation)
css
@media
css
background-blend-mode
css
background-clip
css
background-image
css
background-origin
css
background-position
css
background-repeat
css
background-size
css
background
css
box-shadow
css
box-sizing
css
clear
css
column-count
css
CSS comments
css
direction
css
display:flex
css
display:grid
css
display:none
css
display
css
float
css
font-stretch
css
font shorthand
css
clamp()
css
max()
css
min()
css
gap, column-gap, row-gap
css
!important keyword
css
fit-content, min-content, max-content
css
linear-gradient()
css
list-style
css
margin
css
mix-blend-mode
css
object-fit
css
object-position
css
opacity
css
overflow
css
:hover
css
radial-gradient()
css
rgb()
css
rgba()
css
Adjacent sibling combinator
css
Attribute selector
css
Chaining selectors
css
Child combinator
css
Class selector
css
Descendant combinator
css
General sibling combinator
css
Grouping selectors
css
ID selector
css
Type selector
css
Universal selector *
css
system-ui, ui-serif, ui-sans-serif, ui-rounded, ui-monospace
css
text-align
css
text-decoration-color
css
text-decoration-line
css
text-decoration-style
css
text-decoration-thickness
css
text-decoration
css
text-emphasis
css
text-indent
css
text-justify
css
text-orientation
css
text-overflow
css
text-underline-position
css
CSS calc() function
css
initial unit
css
white-space
css
word-break
css
word-wrap
css
writing-mode
css
Not Supported
96 CSS features are not supported by Gmail.
Show 96 unsupported features
accent-color
css
align-items
css
animation
css
aspect-ratio
css
@font-face
css
@import
css
@keyframes
css
@media (-webkit-device-pixel-ratio)
css
@media (hover), @media (any-hover)
css
@media (prefers-color-scheme)
css
@media (prefers-reduced-motion)
css
@supports
css
backdrop-filter
css
block-size & inline-size
css
border-image
css
border-inline & border-block individual logical properties
css
border-inline & border-block longhand properties
css
border-inline & border-block
css
border-radius logical properties
css
clip-path
css
color-scheme CSS property
css
conic-gradient()
css
cursor
css
filter
css
flex-direction:column
css
flex-wrap: wrap
css
light-dark()
css
grid-template-* properties
css
hyphenate-character
css
hyphenate-limit-chars
css
hyphens
css
inline-size
css
inset
css
justify-content
css
left, right, top, bottom
css
list-style-image
css
margin-block-start & margin-block-end
css
margin-inline & margin-block
css
margin-inline-start & margin-inline-end
css
mask-image
css
max-block-size
css
max-inline-size
css
min-block-size
css
min-inline-size
css
lch(), oklch(), lab(), oklab()
css
CSS Nesting
css
orphans
css
outline-offset
css
overflow-wrap
css
padding-block-start & padding-block-end
css
padding-inline & padding-block
css
padding-inline-start & padding-inline-end
css
position
css
:active
css
:checked
css
:first-child
css
:first-of-type
css
:focus
css
:has()
css
lang()
css
:last-child
css
:last-of-type
css
:link
css
:not
css
:nth-child
css
:nth-last-child
css
:nth-last-of-type
css
:nth-of-type
css
:only-child
css
:only-of-type
css
:target
css
:visited
css
::after
css
::before
css
::first-letter
css
::first-line
css
::marker
css
::placeholder
css
resize
css
scroll-snap
css
shape-margin
css
shape-outside
css
tab-size
css
text-decoration-skip-ink
css
text-emphasis-position
css
text-shadow
css
text-underline-offset
css
text-wrap
css
transform
css
transition
css
user-select
css
CSS Variables (Custom Properties)
css
visibility
css
white-space-collapse
css
widows
css
z-index
css