How to Inline CSS for Email (and What Can't Be Inlined)
Inline the styles your layout depends on, because some clients, Gmail's apps reading non-Google accounts among them, remove the <style> block, but keep the block for media queries, :hover and dark-mode rules, which cannot be inlined.
Works in 16 of 21. Partial in Gmail, Gmail Android, Gmail iOS and 2 more.
Every client by level
- Works
- Outlook 365, Outlook (New), Outlook iOS, Outlook Android, Outlook for Mac, Apple Mail, Apple Mail iOS, Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, Samsung Mail, Thunderbird, HEY Mail, AOL Mail, Fastmail, Superhuman
- Partial
- Gmail, Gmail Android, Gmail iOS, Outlook Classic, Proton Mail
What to do instead in Gmail
Inline CSS for Gmail compatibility
<div style="background-color: #6d28d9; padding: 32px;">
<h1 style="color: #fff; font-size: 24px;
font-family: Arial, sans-serif; margin: 0;">
Hello
</h1>
</div>Show the original
<style>
.header { background-color: #6d28d9; padding: 32px; }
.title { color: #fff; font-size: 24px; }
</style>
<div class="header">
<h1 class="title">Hello</h1>
</div>A free account opens all 21 clients and keeps your checks for 7 days. Create a free account →
Philippe Kam, founder of Emailens · Published 19 Jul 2026 · Updated 28 Oct 2026
@emailens/engine 0.18.22 · data last changed 10 Nov 2026
Part of the HTML email guide · all guides
Write CSS in a <style> block, send the email, and half your clients render it as if the styles were never there. The fix is inlining, but it's widely misunderstood. Here's what it actually does, what it can't, and why you still keep a style block around.
Why inlining exists
On the web, you put CSS in a stylesheet and elements inherit it. Email clients don't play along. Some drop the <style> block: Gmail's apps do for accounts that are not Google accounts, and Gmail itself drops one placed in the body or over its size limit. When that happens, any rule that wasn't written directly on the element vanishes.
Inlining is the workaround: it copies each matching rule onto the element's own style= attribute, where every client reads it. So .btn { color: #fff } plus <a class="btn"> becomes <a class="btn" style="color:#fff">.
What inlining handles for you
- Specificity. When two rules target the same element, the more specific selector wins, an id over a class, a class over a tag, exactly as a browser resolves the cascade. A good inliner flattens that correctly.
!important. Preserved during the merge, so intentional overrides survive.- Shorthand and inheritance. The computed declarations land on the element, so you don't lose values to a stripped stylesheet.
What inlining can't move (and why you keep a style block)
Some CSS has no inline equivalent, because an inline style= attribute styles exactly one element and can't express conditions or states:
- Media queries (
@media), your responsive and mobile-specific styles. - Pseudo-classes and elements (
:hover,::before). @font-faceand keyframe animations.
A proper inliner leaves those in a <style> block rather than dropping them. So the end state is hybrid: most styles inlined for universal support, plus a slim style block for the things that need it. Keep that block, it's what makes your email responsive.
When you don't need to inline by hand
If you build with a framework, inlining may already be happening. MJML and Maizzle inline as part of their build; React Email encourages inline styles from the start. You mostly need a standalone inliner when you're hand-writing HTML, exporting from a design tool, or working with a template that ships a big <style> block.
One caveat worth knowing: inlining repeats declarations onto every element, which inflates your HTML. On large emails that can push you past Gmail's 102KB clip limit, so inline first, then check your size.
Do it in the browser
You can inline any email without a build step: paste it into the CSS inliner, which flattens your styles while preserving media queries. Then confirm the result with the CSS compatibility checker (inlining puts CSS where clients can read it, but doesn't make them support it), keep an eye on weight with the email minifier, and look up any single property in Can I email. For modern utility-first frameworks, read our guide on why Tailwind v4 emails break in Gmail.
Questions
Why does CSS have to be inlined for HTML emails?
Older and mobile email clients, most notably Gmail across non-Google Workspace/IMAP setups and Yahoo Mail mobile, frequently strip <style> blocks from the document <head>. Inlining moves CSS rules directly into style='' attributes on DOM nodes, guaranteeing that critical layouts and typography render.
What CSS properties cannot be inlined?
CSS pseudo-classes (:hover, :focus), @media responsive queries, keyframe animations, and @font-face rules cannot exist inside an inline style attribute. They must remain in a preserved <style> block in the <head>.
Can CSS inlining cause Gmail clipping?
It can. Inlining copies each rule onto every element it matches, so the HTML grows. We inlined 55 of our own templates with the same settings as our inliner: they grew by 6% to 36%, 25% at the median. An email already close to Gmail's 102KB clip can cross it, so measure the size after inlining, not before.
Should I inline CSS before or after minifying?
Always inline first, then minify. Inlining generates extra markup and whitespace; running HTML minification afterward strips the redundant whitespace and comments to keep your payload under the 102KB limit.
Your next question
Also useful: CSS Inliner · HTML email checker · Lint HTML emails in 21 clients
Paste the email that broke.
No signup · Five clients free, Outlook Classic included · All 21 with an account
The checker needs a computer screen.
Get new email CSS fixes by email, or follow by RSS.