MailViewr - Free HTML Email Preview Tool

CSS Support Matrix

Complete reference showing which CSS properties work in which email clients.

Compare support across 210 CSS properties and 21+ email clients

Overview

This matrix shows the support status for CSS properties across different email clients. Use it to quickly determine which CSS features you can safely use in your email templates.

YesProperty is supported across all tested versions
PartialProperty is supported in some versions or with limitations
NoProperty is not supported

CSS × Email Client Matrix

Scroll horizontally to see all email clients. Click any CSS property to view detailed information.

CSS Property
AOL
Apple Mail
Fastmail
Free.fr
Gmail
GMX
Hey
IONOS 1&1
La Poste
Mail.ru
Orange Mail
Outlook
ProtonMail
Rainloop
Samsung Email
SFR
T-Online
Thunderbird
Web.de
WP.pl
Yahoo Mail
accent-colorNoPartialNo?No?Yes??YesNoNoNo?YesPartial????No
align-itemsNoYesYes?NoPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
animationNoYesYes?NoPartialYesPartialPartialNoNoPartialNo?YesPartial?YesPartial?No
aspect-ratioNoPartialNo?NoPartialYesYesYesYesNoNoYes?NoYes?NoPartial?No
@font-faceNoYesNo?NoPartialYesPartialPartialNoPartialPartialPartial?YesPartial?YesPartial?No
@importNoYesNo?NoPartialYesPartialNoNoPartialPartialPartial?NoNo?PartialPartialNoNo
@keyframesPartialYesYes?NoPartialYesPartialPartialNoNoPartialNo?YesPartial?YesPartial?Partial
@media (-webkit-device-pixel-ratio)NoYesYes?NoPartialYesYesPartialNoYesPartialPartial?YesPartial?NoPartial?No
@media (hover), @media (any-hover)NoYes??No???NoNo?PartialYes?YesPartial????No
@media (orientation)NoPartialYes?PartialYesYesYesPartialYesPartialPartialNo?PartialPartial?PartialYes?No
@media (prefers-color-scheme)NoPartialPartialYesNoPartialPartialYesPartialNoPartialPartialNo?PartialPartialNoPartialPartial?No
@media (prefers-reduced-motion)NoYesNo?NoPartialYesYesPartialNoYesPartialPartial?YesPartial?NoPartial?No
@mediaPartialYesYes?PartialYesYesYesPartialPartialYesPartialPartial?PartialPartial?PartialYes?Partial
@supportsYesYesNo?NoPartialYesYesPartialNoYesPartialPartial?YesPartial?PartialPartial?Yes
backdrop-filterNoPartial??NoNo???YesNoPartial??YesYes??No?No
background-blend-modeNoYesYes?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
background-clipNoYesYes?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
background-colorYesYesYes?YesPartialYesYesYesYesPartialYesYes?YesYes?YesPartial?Yes
background-imagePartialYesYesNoPartialPartialYesYesYesYesYesPartialYes?PartialYesNoYesPartial?Partial
background-originNoYesYes?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
background-positionYesYesYes?PartialPartialYesYesYesYesYesPartialYes?YesYes?YesPartial?Yes
background-repeatYesYesYes?PartialPartialYesYesYesYesYesPartialYes?YesYes?YesPartial?Yes
background-sizeYesYesYes?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?Yes
backgroundPartialYesYes?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?Partial
block-size & inline-sizeNoPartialYes?NoPartialYesYesYesYesNoPartialYes?YesYes?YesPartial?No
border-collapseYesYes??YesYes???Yes?YesYes?YesYes?YesYes?Yes
border-imageNoYesYes?NoPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
border-inline & border-block individual logical propertiesNoPartial??NoPartial?Yes?Yes?PartialYes?PartialYes??Partial?No
border-inline & border-block longhand propertiesNoPartial??NoPartial?Yes?Yes?PartialYes?YesYes??Partial?No
border-inline & border-blockNoPartial??NoPartial?Yes?Yes?NoYes?NoYes??Partial?No
border-radius logical propertiesNoPartial??No????Yes?NoYes?NoYes????No
border-radiusPartialYesYes?YesPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?Partial
border-spacingYesYes??YesYes???Yes?PartialYes?YesYes?YesYes?Yes
borderYesYesYes?YesYesYesYesYesYesYesPartialYes?YesYes?YesYes?Yes
box-shadowNoYesYes?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
box-sizingNoYesYes?PartialYesYesYesYesYesPartialPartialYes?YesYes?YesYes?No
caption-sideYesYesYes?YesYesYesYesYesYesYesPartialYes?YesYes?YesYes?Yes
clearPartialPartial??PartialPartial???Yes?PartialYes?Yes???Partial?Partial
clip-pathNoPartialYes?NoPartialYesYesYesPartialPartialPartialYes?YesYes?YesPartial?No
color-scheme CSS propertyNoYesNo?NoNoNo??No?NoPartial?YesPartialNoYesNo?No
column-countNoYesYes?PartialPartialYesYesYesYesYesPartialYes?YesYes?YesPartial?No
css column propertiesNoYesYes?Yes?Yes??Yes?PartialYes?YesYes?Yes??No
CSS commentsPartialYes??PartialNo??PartialPartialNoYes??YesPartial?YesNo?Partial
conic-gradient()NoYesYesNoNo?Yes?YesYesNoPartialYes?PartialYesYesYes??No
cursor?Partial??NoPartial?????NoPartial????Yes??Partial
directionYesYesYes?PartialYesYesYesYesYesYesYesYes?YesYes?YesYes?Yes
display:flexPartialYesYes?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?Partial
display:gridNoYesYes?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
display:noneYesYesYes?PartialYesYesYesYesYesYesPartialYes?YesYes?YesYes?Yes
displayPartialYesPartial?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?Partial
empty-cellsPartialYes??Yes????No?PartialYes?Yes?????Partial
filterNoYesNo?NoPartialYesYesYesPartialPartialPartialYes?YesYes?YesPartial?No
flex-direction:columnNoYesYes?NoPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
flex-wrap: wrapNoYesYes?NoPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
floatPartialPartialYes?PartialPartialYesYesYesYesYesPartialYes?YesYes?YesPartial?Partial
font-kerningNoYes?YesYesNo???No?PartialYes?YesYesNoYes??No
font-sizePartialYes??YesPartial???Yes?Partial??Partial??YesPartial?Partial
font-stretchNoYes??Partial????Yes?PartialYes?NoPartial?Yes??No
font-weightPartialYesYes?YesYesYesYesYesYesPartialPartialYes?YesYes?YesYes?Partial
font shorthandYesYesYes?PartialYesYesYesYesYesYesYesYes?YesYes?YesYes?Yes
clamp()NoPartialNo?PartialPartialYesYesYesYesNoNoYes?NoYes?YesPartial?No
light-dark()NoYes?NoNoNoPartial?PartialPartialNoNoPartial?PartialPartialPartialPartial??No
max()NoYesNo?PartialPartialYesYesYesYesNoPartialYes?NoYes?YesPartial?No
min()NoYesNo?PartialPartialYesYesYesYesNoPartialYes?NoYes?YesPartial?No
gap, column-gap, row-gapNoYesPartialYesPartialNoYes?YesYesNoPartialYes?YesYesYesYes??No
grid-template-* propertiesNoYesNoYesNoNoYes?YesYesNoPartialYes?YesYesYesYes??No
height propertyNoYesYes?YesYesYesYesYesYesYesPartialYes?YesYes?YesYes?No
hyphenate-characterNoPartial??NoNo???Partial?No??Yes???No?No
hyphenate-limit-charsNoNo??NoNo???Yes?No??No??NoNo?No
hyphensNoYes??No????Yes?Partial??YesYes????No
!important keywordPartialYesYes?PartialPartialYesYesYesYesNoPartialPartial?YesPartial?YesPartialNoPartial
inline-size NoNoNo?NoPartialYesYesYesYesPartialNoYes?YesYes?YesPartial?No
insetNoPartial??NoNo???No?No??No??YesNo?No
fit-content, min-content, max-contentNoYesYes?Partial?Yes?YesYesNoPartialYes?NoYes?Yes??No
justify-contentNoYesYes?NoPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
left, right, top, bottomNoYesYes?NoYesYesYesYesPartialYesPartialYes?PartialYes?YesYes?No
letter-spacingYesYesYes?YesYesYesYesYesYesYesPartialYes?YesYes?YesYes?Yes
line-heightYesYesYes?YesYesYesYesYesYesPartialPartialYes?YesYes?YesYes?Yes
linear-gradient()NoYesYesYesPartialPartialYesYesYesYesNoPartialYes?PartialYesYesYesPartial?No
list-style-imageNoYesYes?NoYesYesYesYesYesPartialPartialPartial?YesYes?YesYes?No
list-style-positionYesYesYes?YesYesYesYesYesYesYesPartialYes?YesYes?YesYes?Yes
list-style-typeYesYesYes?YesYesYesYesYesYesYesYesYes?YesYes?YesYes?Yes
list-stylePartialYesYes?PartialYesYesYesYesYesYesPartialPartial?YesYes?YesYes?Partial
margin-block-start & margin-block-endNoPartial??NoPartial?Yes?Yes?PartialYes?Yes???Partial?No
margin-inline & margin-blockNoPartialYes?NoPartialYesYesYesYesYesNoYes?NoYes?YesPartial?No
margin-inline-start & margin-inline-endNoPartial??NoPartial?Yes?Yes?PartialYes?Yes???Partial?No
marginPartialYesYes?PartialYesYesYesYesPartialYesPartialYes?YesYes?YesYes?Partial
mask-imageNoPartial??NoNo???Yes?Partial??Yes???No?No
max-block-sizeNoYes??No????Yes?PartialYes?Yes?????No
max-height propertyYesYesYes?YesYesYesYesYesYesYesPartialYes?YesYes?YesYes?Yes
max-inline-sizeNoYes??NoNo???Yes?NoYes?Yes???No?No
max-widthPartialPartialYes?YesYesYesYesYesYesYesPartialPartial?YesYes?YesYes?Partial
min-block-sizeNoYes??NoNo???Yes?NoYes?Yes???No?No
min-height propertyYesYesYes?YesYesYesYesYesYesYesPartialPartial?YesPartial?YesYes?Yes
min-inline-sizeNoYes??No????Yes?PartialYes?Yes?????No
min-width propertyYesYesYes?YesYesYesYesYesYesYesPartialYes?YesYes?YesYes?Yes
mix-blend-modeNoYesNo?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
lch(), oklch(), lab(), oklab()NoYesYes?No?Yes??Yes?PartialPartial?No??No??No
CSS NestingNoPartial??No????NoPartialPartial??PartialPartial?Partial??No
object-fitNoYesYes?PartialPartialYesYesYesYesNoPartialYes?YesYes?YesPartial?No
object-positionNoYesYes?PartialPartialYesYesYesYesNoPartialYes?YesYes?YesPartial?No
opacityNoYesYes?PartialPartialYesYesYesNoPartialPartialYes?YesYes?YesPartial?Partial
orphansNoYes??NoNo???Yes?Partial??Yes???No?No
outline-offsetNoYesYesYesNoNoYes?YesYesNoPartialYes?YesYesYesYes??No
outlineYesYesYesYesYesYesYesYesYesYesNoPartialYes?YesYesYesYesYes?Yes
overflow-wrapNoPartial??No????Yes?Partial??Yes?????No
overflowPartialPartialYes?PartialPartialYesYesYesPartialPartialPartialPartial?PartialYes?YesPartial?Partial
padding-block-start & padding-block-endNoPartial??NoPartial?Yes?Yes?PartialYes?Yes???Partial?No
padding-inline & padding-blockNoPartial??NoPartial?Yes?Yes?NoYes?No???Partial?No
padding-inline-start & padding-inline-endNoPartial??NoPartial?Yes?Yes?PartialYes?Yes???Partial?No
paddingYesYesYes?YesYesYesYesYesYesYesPartialYes?YesYes?YesYes?Yes
positionPartialPartialPartial?NoYesPartialYesPartialNoPartialPartialYes?PartialPartial?YesYes?Partial
:activePartialPartialYes?NoYesYesYesPartialNoPartialPartialYes?NoPartial?YesYes?Yes
:checkedYesYesYes?NoPartialNoNoNoNoNoPartialNo?YesNo?YesPartial?Yes
:first-childYesYesYes?NoYesYesYesPartialNoYesPartialPartial?YesPartial?YesYes?Yes
:first-of-typeYesYesYes?NoPartialYesYesPartialNoYesPartialPartial?YesPartial?YesPartial?Yes
:focusPartialPartialYes?NoPartialYesPartialPartialNoPartialPartialYes?YesPartial?YesPartial?Yes
:has()NoPartialPartial?NoPartialYesYesPartialNoPartialPartialPartial?PartialPartial?NoPartial?No
:hoverPartialYesYes?PartialPartialYesYesPartialNoYesPartialYes?YesPartial?YesPartial?Yes
lang()NoYes??No???NoNo?PartialYes?YesNo????No
:last-childYesYesYes?NoYesYesYesPartialNoYesPartialPartial?YesPartial?YesYes?Yes
:last-of-typeYesYesYes?NoPartialYesYesPartialNoYesPartialPartial?YesPartial?YesPartial?Yes
:linkYesYesYes?NoYesYesYesPartialNoYesPartialPartial?YesPartial?YesYes?Yes
:notNoYesYes?NoPartialYesYesPartialNoYesPartialPartial?YesPartial?YesPartial?No
:nth-childNoYesYes?NoPartialYesYesPartialNoYesPartialPartial?YesPartial?YesPartial?No
:nth-last-childNoYesYes?NoPartialYesYesPartialNoYesPartialPartial?YesPartial?YesPartial?No
:nth-last-of-typeNoYesYes?NoPartialYesYesPartialNoYesPartialNo?YesPartial?YesPartial?No
:nth-of-typeNoYesYes?NoPartialYesYesPartialNoYesPartialNo?YesPartial?YesPartial?No
:only-childYesYesYes?NoYesYesYesPartialNoYesPartialPartial?YesPartial?YesYes?Yes
:only-of-typeYesYesYes?NoYesYesYesPartialNoYesPartialPartial?YesPartial?YesYes?Yes
:targetPartialNoNo?NoPartialNoNoNoNoPartialPartialPartial?YesPartial?YesPartial?Yes
:visitedPartialNoYes?NoPartialYesPartialPartialNoPartialPartialNo?NoPartial?YesPartial?Yes
::afterNoYesYes?NoPartialYesYesPartialNoPartialPartialPartial?YesPartial?YesPartial?No
::beforeNoYesYes?NoPartialYesYesPartialNoPartialPartialPartial?YesPartial?YesPartial?No
::first-letterYesYesYes?NoYesYesYesPartialNoPartialPartialPartial?YesPartial?YesYes?Yes
::first-lineYesYesYes?NoYesYesYesPartialNoPartialPartialPartial?YesPartial?YesYes?Yes
::markerYesYesYes?No?Yes?PartialNoPartialPartialPartial?YesPartial?Yes??Yes
::placeholderYesYesYes?NoPartialNoNoNoNoNoPartialNo?YesNo?YesPartial?Yes
radial-gradient()NoYesYesYesPartialPartialYesYesYesYesYesPartialYes?YesYesYesYesPartial?No
resizeNoPartial??NoNo???YesNoNoNo?YesNo??No?No
rgb()PartialPartialYes?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?Partial
rgba()PartialPartialYes?PartialPartialYesYesYesYesNoPartialYes?YesYes?YesPartial?Partial
scroll-snapNoYesNo?No?Yes?YesYesNoPartialYes?YesYes?Yes??No
Adjacent sibling combinatorYesYesYes?PartialPartialYesYesYesYesYesPartialPartial?YesPartial?YesPartial?Yes
Attribute selectorPartialYesYes?PartialPartialYesPartialYesPartialYesPartialNo?YesPartial?YesPartial?Partial
Chaining selectorsYesYesYes?PartialPartialYesYesYesYesPartialPartialPartial?YesPartial?YesPartial?Partial
Child combinatorYesYesYes?PartialPartialYesYesYesYesPartialPartialPartial?YesPartial?YesPartial?Partial
Class selectorYesYesYes?PartialYesYesYesYesYesYesYesPartial?YesPartial?YesYes?Partial
Descendant combinatorYesYesYes?PartialPartialYesYesYesYesYesYesPartial?YesPartial?YesPartial?Partial
General sibling combinatorYesYesYes?PartialPartialYesYesYesYesYesPartialPartial?YesPartial?YesPartial?Yes
Grouping selectorsYesYesYes?PartialPartialYesYesYesYesYesYesPartial?YesPartial?YesPartial?Partial
ID selectorYesYesYes?PartialYesYesPartialYesYesYesYesPartial?YesPartial?YesYes?Partial
Type selectorYesYesYes?PartialPartialYesYesYesYesYesYesPartial?YesPartial?YesPartial?Partial
Universal selector *YesYesYes?PartialYesYesYesYesNoYesPartialPartial?YesPartial?YesYes?Partial
shape-marginNoYes??No????Yes?Partial??Yes??Yes??No
shape-outsideNoYes??No????Yes?Partial??Yes??Yes??No
system-ui, ui-serif, ui-sans-serif, ui-rounded, ui-monospacePartialYesYes?PartialYesYes?YesYesPartialPartialPartial?PartialPartialYesPartial??Partial
tab-sizeNoYes??NoPartial?Partial?No?Partial??Yes???Partial?No
table-layoutYesYes??Yes????Yes?PartialYes?Yes?????Yes
text-align-lastNoPartial?YesYes????Yes?PartialYes?Yes?Yes???No
text-alignPartialYesYes?PartialYesYesYesYesYesPartialPartialYes?YesYes?YesYes?Partial
text-decoration-colorYesPartialYes?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?Yes
text-decoration-linePartialPartial??PartialNo???Yes?PartialYes?Yes??YesNo?Partial
text-decoration-skip-inkNoPartialYes?NoNoYes?YesYesNoNoYes?YesYes?YesNo?No
text-decoration-stylePartialPartial??PartialNo???Yes?PartialYes?Yes??YesNo?Partial
text-decoration-thicknessNoPartialYes?PartialPartialYesYesYesYesPartialPartialPartial?PartialPartial?PartialPartial?No
text-decorationYesYesYes?PartialPartialYesYesYesYesPartialPartialPartial?YesPartial?YesPartial?Yes
text-emphasis-positionNoYes??NoPartial?Yes?Yes?PartialYes?No???Partial?No
text-emphasisNoYes??PartialPartial?Yes?Yes?PartialYes?No???Partial?No
text-indentPartialYesYes?PartialYesYesYesYesPartialYesYesYes?YesYes?YesYes?Partial
text-justifyNoNo??PartialPartial???Partial?Partial??No???No?Partial
text-orientationNoPartial??PartialNo???Yes?PartialYes?Yes??YesNo?No
text-overflowNoYesYes?PartialPartialYesYesYesYesPartialPartialYes?NoYes?YesPartial?No
text-shadowYesYesYes?NoYesYesYesYesYesYesPartialYes?YesYes?YesYes?Partial
text-transformYesYesYes?YesYesYesYesYesYesYesPartialYes?YesYes?YesYes?Yes
text-underline-offsetNoYesYes?NoPartialYesYesYesYesPartialPartialPartial?YesPartial?YesPartial?No
text-underline-positionNoPartial??PartialNo???Yes?PartialYes?Yes??YesNo?No
text-wrapNoYes??NoNo???Yes?No??Yes???No?No
transformNoYesYes?NoPartialYesYesYesNoPartialPartialYes?YesYes?YesPartial?No
transitionPartialYesYesYesNo?Partial?YesYesNoNoPartial?PartialPartial?Yes??Partial
CSS calc() functionNoYesYes?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
ch unitNoYesYes?YesPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
cm unitYesYesYes?YesYesYesYesYesYesYesYesYes?YesYes?YesYes?Yes
em unitYesYesYes?YesYesYesYesYesYesYesYesYes?YesYes?YesYes?Yes
ex unitYesYesYes?YesYesYesYesYesYesYesYesYes?YesYes?YesYes?Yes
in unitYesYesYes?YesYesYesYesYesYesYesYesYes?YesYes?YesYes?Yes
initial unitNoYesYes?PartialPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
mm unitYesYesYes?YesYesYesYesYesYesYesYesYes?YesYes?YesYes?Yes
pc unitYesYesYes?YesYesYesYesYesYesYesYesYes?YesYes?YesYes?Yes
% unitYesYesYes?YesYesYesYesYesYesYesYesYes?YesYes?YesYes?Yes
pt unitYesYesYes?YesYesYesYesYesYesYesYesYes?YesYes?YesYes?Yes
px unitYesYesYes?YesYesYesYesYesYesYesYesYes?YesYes?YesYes?Yes
rem unitNoYesYes?YesPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
vh unitYesPartialNo?YesPartialYesYesYesYesPartialPartialYes?YesPartial?YesPartial?Yes
vmax unitNoYesYes?YesPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?No
vmin unitNoYesYes?YesPartialYesYesYesYesPartialPartialYes?YesPartial?YesPartial?No
vw unitYesYesNo?YesPartialYesYesYesYesPartialPartialYes?YesYes?YesPartial?Yes
user-selectNoPartial??NoNo???Yes?No??Yes???No?No
CSS Variables (Custom Properties)NoYesNo?NoPartialYesYesYesNoPartialPartialYes?YesYes?YesPartial?No
vertical-alignYesYesYes?YesYesYesYesYesYesYesYesYes?YesYes?YesYes?Yes
visibilityPartialYesYes?NoYesYesYesYesYesPartialPartialYes?YesYes?YesYes?Partial
white-space-collapseNoPartial??No????Yes?No??Yes?????No
white-spaceYesYesYes?PartialPartialYesPartialYesYesYesPartialYes?NoPartial?YesPartial?Partial
widowsNoYes??NoNo???Yes?Partial??Yes???No?No
width propertyYesYesYes?YesYesYesYesPartialYesYesPartialYes?YesYes?YesYes?Yes
word-breakNoPartialYes?PartialPartialPartialPartialYesYesPartialPartialPartial?PartialYes?YesPartial?No
word-spacingPartialYes??YesPartial???Yes?PartialYes?Yes??YesPartial?Partial
word-wrap?Yes??Partial??????Partial????????Yes
writing-modeNoYesNo?PartialPartialYesYesYesYesNoPartialYes?YesYes?YesPartial?No
z-indexYesYesYes?NoYesYesYesYesNoYesPartialYes?YesYes?YesYes?Yes

How to Use This Matrix

  1. Find your CSS property: Locate the CSS property you want to use in the left column
  2. Check email client support: Look across the row to see which clients support it
  3. Click for details: Click the property name to access in-depth documentation
  4. View compatibility details: On the detail page, see version-specific support and workarounds

Related Resources