$ toolfu run css-inliner
CSS Inliner for Email — Inline CSS in HTML Online
Free CSS inliner for email. Convert style blocks to inline style attributes for email client compatibility. Get email-ready HTML instantly.
all processing runs in your browser
css-inliner
input > HTML with <style> blocks
inlined output
Inline CSS for Email-Ready HTML
Building HTML emails is notoriously difficult because most email clients strip out <style> tags. The solution is to move all CSS declarations to inline style attributes on each element.
This tool parses your HTML, extracts CSS rules from <style> blocks, matches them to elements using simple selectors, and adds the declarations as inline style attributes. The <style> blocks are then removed, leaving email-client-safe HTML.
How it works
- Extracts all CSS from <style> blocks
- Matches rules to elements by tag, class, and ID
- Merges declarations with existing inline styles
- Removes <style> blocks from the output
$ cat FAQ.md
Why do emails need inline CSS?▶
Most email clients strip <style> tags and external stylesheets from HTML emails. Inline styles (style attributes on each element) are the most reliable way to ensure your email renders correctly across Gmail, Outlook, Apple Mail, and other clients.
What CSS selectors are supported?▶
This tool supports simple tag selectors (h1, p, div), class selectors (.classname), and ID selectors (#id). Complex selectors like descendant combinators or pseudo-classes are not supported — for those, use a full email framework.
Are <style> blocks removed after inlining?▶
Yes. After applying the CSS rules as inline style attributes, the <style> blocks are removed from the output since they're no longer needed.