HTML Email CSS Inliner

How to use

1. 1Paste your HTML email source into the input area. Include the full document with the head and any style blocks.
2. 2Use the default options for most cases. Defaults remove style blocks but keep media queries, :hover rules, keyframes, and MSO conditional comments.
3. 3Toggle Strip class attributes or Strip id attributes only if your output is going straight to send and you do not need anchors or selectors targeting those attributes.
4. 4Read the stats: elements styled, rules inlined, rules rescued, and the size delta. Warnings appear when a setting drops rules that could not be inlined.
5. 5Click Copy HTML to grab the inlined output. Click Copy CSS in the rescued block if you want to inspect the leftover rules separately.
6. 6Test the result in Litmus, Email on Acid, or by sending yourself a copy through SendGrid, Mailgun, Postmark, SES, or your stack of choice.

About this tool

HTML Email CSS Inliner converts a normal HTML email template (with rules defined inside style tags) into the inline-style format every email client renders reliably. Paste the full HTML and the tool parses the document with the browser's DOMParser, reads every style block in source order, tokenises the CSS into rules and at-rules, then computes CSS Selectors Level 3 specificity for each selector and applies declarations to matching elements through querySelectorAll. The cascade is preserved: !important wins over normal, higher specificity wins over lower, later source order breaks ties, and any preexisting inline style on an element keeps priority over stylesheet matches at equal !important level. Rules that genuinely cannot be expressed as a style attribute (media queries, :hover, ::before, ::after, @keyframes, @font-face, @supports) are not silently dropped. They are pulled into a single rescued style block that the tool reinserts at the top of head, so Apple Mail, Yahoo Mail, and Gmail web (which all honour style tags reasonably well) still see responsive layouts, link hover states, web fonts, and animations. Configurable options let you keep or remove the original style blocks, strip class and id attributes once they are no longer needed, drop ordinary HTML comments while preserving Outlook MSO conditional comments such as if mso and endif, and pick which kinds of at-rules to preserve. The output panel shows the inlined HTML ready to paste into SendGrid, Mailgun, Postmark, SES, Mailchimp, or any other transactional sender, plus a separate panel for the rescued CSS so you can inspect or copy it on its own. Stats report how many rules were inlined, how many rescued, how many had no matching element, the total declarations applied, and the input vs output byte size so you can verify the transform before sending. Everything runs locally in your browser. No upload, no external API, no tracking.

Free to use. Works in your browser. No signup, no login.