Email HTML to Inline CSS Converter
Paste email HTML with
<style> blocks and get HTML with every rule inlined onto the matching elements. Required for Outlook (which strips <style> blocks) and Gmail (which strips them in some views).
Email Marketing Intelligence
Outlook ignores
<style> blocks entirely. Inline CSS is the only reliable approach.
Gmail honours
<style> in some views but strips it in Promotions tab previews. Outlook (Windows) ignores everything but inline styles. The safe answer is inline every rule at build time. This runs the standard inliner against your HTML, in your browser, with no upload.
Input
Output
Inlined HTML
Preview
What this does and doesn't do
Handles: simple selectors (tag, class, id, descendant, direct child), standard CSS properties, specificity ordering.
Doesn't handle: media queries (
@media. can't be inlined, kept in <style> if you tick the keep-style option), pseudo-classes (:hover), pseudo-elements (::before). Keep these in a <style> block for the clients that support them.Best practice: inline everything you can, then put responsive breakpoints and :hover in a <style> block as progressive enhancement.
Frequently asked questions
Why does email need inline CSS?
Many email clients (Gmail, Outlook, older webmail) strip
<style> blocks or ignore them. Inline style="…" attributes survive.What does the tool do?
Takes HTML with
<style> blocks and rewrites each matching selector's rules as inline style attributes.Can I keep media queries?
Media queries can't be inlined (they target the environment, not individual elements). The tool preserves @media rules in a leftover style block.
Which selectors can be inlined?
Element, class, ID. Pseudo-classes (:hover, :focus) can't be inlined: kept in the leftover style block.
Does the tool handle CSS specificity?
Yes. Rules apply in the order CSS would evaluate them, with later/more-specific rules overriding earlier.
What about !important?
Preserved on the inline rule. Overrides remaining style-block rules the client might partially support.
Can I handle dark mode in email?
Partially.
@media (prefers-color-scheme: dark) survives but Outlook has its own rules. Use <meta name="color-scheme"> alongside.How large an email can the tool handle?
Up to about 1MB of HTML. Larger emails usually get clipped by Gmail anyway (102KB limit).
What is the Gmail 102KB clip?
Gmail truncates emails over 102KB and shows a "View entire message" link. Hurts engagement. Keep emails under this.
Does the tool work on AMP for Email?
AMP emails have a stricter spec and should be built with AMP tooling. This tool handles standard HTML email.
Can I preview the inlined email?
Yes. Side-by-side preview or render in your email client. Litmus or Email on Acid are the full QA tools.
Free · no account
SEORCE for Chrome, Edge and Firefox
Audits the page you are on: headings, meta tags, schema, indexability, and whether AI crawlers can read it. Export the result as a PDF. Free, with no account.
It audits one page at a time and does not track AI answers. About the extension
Traffic from search and AI
See which visits came from search and AI.
SEORCE Web Analytics runs from one script tag, with Google Search Console connected. It shows visits from every AI source, from search and from campaigns, and it is free on every plan.
3,000+ users · Free forever plan, no card needed