CSS Inliner for Email HTML
Free · No Signup · Processed in Your Browser
Paste your HTML and CSS. Every rule that matches gets written as an inline style="..." attribute — the format most email clients actually render. Nothing you paste is ever uploaded.
Step 1a - Paste Your HTML
Step 1b - Paste Your CSS
Load an example · Processed in your browser — nothing you paste is uploaded.
Tip: press ⌘/Ctrl+Enter from either field to inline.
Step 2 - Click Button
Inlined HTML
Every matched rule is now a style="..." attribute on the element.
Fallback CSS
@media, :hover, and other rules that can't be inlined. Keep this in a <style> block for clients that support it.
How This Works
- Rules are matched against your HTML with the browser's own selector engine, then written onto each matching element's
styleattribute. - Rules apply in the order they appear in your CSS — a later rule overrides an earlier one on the same property. This isn't full CSS specificity (IDs vs. classes), but it matches real cascade behavior closely if your CSS is already written with overrides later in the file.
:hover,::before, and other state-based rules can't become inline styles, so they're returned separately as fallback CSS instead of being silently dropped.- An element's existing inline style always wins over anything the stylesheet would add — the same as a real browser's cascade.