Skip to main content

Our email CSS engine is open source. Give it a star on GitHub 

Emailens
Sign in

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

152 of 300 features work in Gmail · 17 partial · 131 not supported. Of the 131 not supported, 5 work in at least 14 of the other 20 clients; the other 126 work in 13 or fewer.

Works 152 · Partial 17 · Not supported 131 · Untested 0 · of 300

Gmail Web · webmail · prefers-color-scheme: not supported

The checker needs a computer screen.
See what breaks ↓

Gmail is one of the five clients the checker runs with no 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

What to write instead

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

visibility

The fix for Gmail

Use conditional comments or remove hidden content

after 
<!-- 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 
<div style="visibility: hidden;">
  Hidden content for screen readers
</div>

The checker needs a computer screen.

text-shadow

The fix for Gmail

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

after 
.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 
.glow {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

The checker needs a computer screen.

transform

The fix for Gmail

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 shows a broken image instead.

after 
<!-- 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 
<div style="transform: rotate(45deg);">
  Rotated content
</div>

The checker needs a computer screen.

Paste your email and see what Gmail does to it.

The checker needs a computer screen.

Dark mode in Gmail

How to target Gmail

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

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

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

Build one for several clients →

Before you send to Gmail

  • Keep the <style> block under 16KB and in the <head>: a block that breaks either rule loses every rule inside it, not just the overflow.
  • Preview with images off. Readers who turn images off see only your alt text and background colours.
  • Check the email against Gmail's dark interface. Gmail on the web does not change the message's own colours, so the edges of a white email meet a dark frame.

Your next question

Gmail Android · Gmail iOS

Every feature in Gmail

Show

HTML Elements · 18 of 48 not supported or partial here

HTML Attributes · 9 of 22 not supported or partial here

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

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

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

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

CSS Functions · 1 of 8 not supported or partial here

CSS Properties · 80 of 164 not supported or partial here

How Gmail renders email

Gmail on the web renders a sanitised copy of your HTML. It keeps a <style> block in the <head>, up to 16KB, and supports media queries other than height-based ones, but <link> stylesheets, @font-face and positioning are not supported, and it rewrites every class name. Inline styles remain the safest place for anything critical: a <style> block in the <body> is discarded, and past 16KB Gmail keeps the rules before the limit and drops the rest.

<style> blocks
Kept only in the <head> and only up to 16KB. A block in the <body>, or one over the limit, is removed, and every rule in it goes with it. External stylesheets in <link> are always removed.
@font-face
Not supported. Gmail shows Roboto and Google Sans only because its own interface loads them, so a font stack should end in a system font.
position
Not supported. Overlays and absolutely positioned badges fall back into normal flow, so build them with table cells or background images.
prefers-color-scheme
Not supported, so dark-mode styles written in a media query never apply in Gmail.
  • Gmail rewrites class names with a per-message prefix and rewrites the selectors in your <style> block to match, so class-based styling keeps working. What breaks is anything that depends on the original name from outside, such as a selector in an external stylesheet.
  • Flexbox and grid are supported here, which makes Gmail on the web more capable than the Gmail apps reading non-Google accounts and far more capable than Outlook Classic. A layout that needs to reach both should still be built on tables.
  • Media queries work, except height-based ones, which lets one email adapt between Gmail's desktop and mobile layouts.

Guides for Gmail

Get new email CSS fixes by email.

caniemail (MIT) via @emailens/engine 0.18.22 · data last changed 10 Nov 2026