CSS Email Inliner
Inline CSS <style> block rules into each matching HTML tag's style attribute, for email HTML where most clients strip <style> tags. Supports simple tag, class, ID, and tag+class selectors — no descendant combinators, pseudo-classes, or specificity cascade.
Input
When off, rules this tool can't inline are dropped instead of preserved.
Output
Guides
What this tool does
Most email clients — Gmail, Outlook, and many others — strip out <style> blocks and <head> content when they render an HTML email, or ignore them unpredictably. The only CSS guaranteed to survive is CSS written directly on each element as a style="..." attribute. "CSS inlining" is the process of taking rules written in a normal <style> block and copying their declarations onto every element they match, so the email renders correctly everywhere without relying on stylesheet support.
This tool does that: paste HTML that contains a <style> block, and it rewrites every matching tag with an inline style attribute carrying the resolved declarations, then removes (or optionally keeps) the original <style> block.
Honest scope: simple selectors only
A full CSS selector engine — descendant combinators (div p), child/sibling combinators (div > p, p + span), pseudo-classes and pseudo-elements (a:hover, p::first-line), attribute selectors ([href]), and specificity-based cascade resolution — is a genuinely hard parsing problem without a real browser DOM to query. This tool runs isomorphically (browser, server, and API alike) with no DOM parser available, so it deliberately does not attempt any of that.
What it supports, matched with pattern-based scanning of the raw HTML source:
- Tag selectors —
p,td,h1 - Class selectors —
.button - ID selectors —
#header - Tag + class selectors —
p.intro
Anything else in your stylesheet — a descendant selector, a pseudo-class, an attribute selector, a comma list mixing supported and unsupported forms — is classified as "unsupported" and, by default, kept behind in a <style> block at the top of the output rather than silently dropped or mismatched. Turn that off if you'd rather the output have no <style> block at all.
There's also no specificity cascade: when two or more supported rules match the same element, the one that appears later in your stylesheet wins for any property they both set — regardless of whether it's a tag, class, or ID selector. A real browser would weigh ID selectors above class selectors above tag selectors; this tool doesn't. An element's own pre-existing style="..." attribute is always preserved and always wins over anything pulled in from the stylesheet.
If your email template relies on descendant selectors, pseudo-classes, or precise specificity resolution, use a build-tool-based inliner instead — juice or Premailer both implement a full selector engine and are the right choice for complex stylesheets.
How to use it
- Paste HTML containing a
<style>block into the input box. - Leave "Keep unsupported rules" checked to preserve media queries, pseudo-class rules, and other selectors this tool can't inline in a
<style>block at the top of the output (most email clients that support media queries at all will still read a<style>block placed there). Uncheck it to drop them entirely. - Check "Strip class attributes" if you want
class="..."removed from the output once its styles have been inlined — useful since some inboxes flag emails that still reference external class names. - Copy or download the resulting HTML from the output panel.
The output updates automatically as you edit the input.
FAQ
Will this handle my whole email template correctly?
It handles the common case — tag, class, ID, and tag+class rules — correctly. If your stylesheet uses descendant selectors, pseudo-classes, or depends on CSS specificity to resolve conflicts between rules, this tool will leave those rules in a <style> block instead of guessing, so check the output before sending. See the scope section above.
What happens to @media queries?
They can't be inlined (media queries aren't tied to a single element), so they're left in a <style> block in the output when "Keep unsupported rules" is checked. Some email clients (notably Apple Mail and newer Outlook/Gmail versions) do read a <style> block for media queries even after stripping other styling — that's exactly why this tool preserves them there rather than discarding them.
My element already had a style="..." attribute — what happens to it?
It's kept and always takes precedence over anything inlined from the stylesheet, matching how a real browser prioritizes inline styles over stylesheet rules.
Does it validate or fix broken HTML? No — it's a best-effort transform, not an HTML validator. On badly malformed input it falls back to returning your HTML unchanged rather than producing garbled output or erroring.
Privacy
This tool runs entirely in your browser. Your HTML — including any embedded links, tracking pixels, or personalized content — is never uploaded to a server.