Skip to content
TextArray1.41.0
100% local

CSS inliner for email

Move CSS from a style block into inline style attributes so it survives in email clients.

Input
Output
Related tools
CSS formatterDeveloper tools
HTML formatterDeveloper tools
Unused CSS selector findernewDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
CSS inliner for email
Most email clients strip or ignore CSS written in a <style> block — Gmail's web app is the best-known example. The fix is to move every rule onto the element it targets as a style="" attribute, and that is exactly what this tool does: paste HTML with a <style> block and get back the same markup with the styles inlined, ready to paste into a campaign or transactional template.
The merge respects CSS specificity by default, so a rule like #footer beats a plain a even if that rule comes later in the stylesheet — turn "Respect selector specificity" off to merge by source order alone. Rules that can't be inlined — media queries, :hover, other at-rules — are never dropped silently: "Keep rules that can't be inlined" leaves them in a trimmed <style> block, while "Remove original <style> block" decides whether that block is emitted at all. "Add legacy width/bgcolor attributes" mirrors width, height and background-color onto the plain attributes older Outlook builds expect, "Remove unused classes and IDs" clears out selectors nothing references anymore, and "Minify output" collapses leftover whitespace.
Selector support covers type, class, ID and attribute selectors, plus descendant and child combinators — the patterns real email stylesheets use. An element's own existing style="" attribute always wins over anything merged in, matching how browsers apply the cascade. With "Show unsupported-property warnings" on, properties many clients ignore — float, position: fixed, transforms, box-shadow — are flagged in a comment at the top of the output, so you catch them before sending a test.
Everything runs locally in your browser: the HTML you paste is never uploaded anywhere. Copy the result, download it as a .txt file, or send it straight into another tool to keep cleaning it up.
FAQ
Why do I need to inline CSS for email at all?
Many email clients — Gmail's web interface especially — strip <style> blocks from the <head> or ignore them entirely, but they do respect a style="" attribute on the element itself. Inlining is the workaround the whole HTML-email industry relies on.
What happens to media queries and :hover rules?
They can't be inlined onto a single element, so by default they're kept in a trimmed <style> block for the clients that do read it — turn off "Keep rules that can't be inlined" to drop them instead.
Does it handle selector specificity correctly?
Yes. An ID selector overrides a class selector, which overrides a type selector, regardless of the order the rules appear in — the same rules a browser uses. Turn off "Respect selector specificity" to merge by source order alone instead.
What are the width/bgcolor attributes for?
Some older Outlook builds render tables using Word's engine and ignore inline CSS for backgrounds and sizing. "Add legacy width/bgcolor attributes" mirrors those values onto plain HTML attributes those clients do honor.
Is my HTML uploaded anywhere?
No. CSS inlining runs entirely in your browser — your email template never leaves your device.