CSS Inliner

Free

Moves all CSS rules from <style> blocks into inline style attributes — exactly what MailChimp, Gmail, and most email clients require. Preserves media queries for responsive layouts.

Drop your HTML file here

or click to browse · .html,.htm

or paste HTML directly

Preserve media queries Preserve :hover / :focus Remove <style> block after inlining Minify inlined styles

All processing happens in your browser. Your HTML never leaves your machine.

Why you need to inline CSS for email

Most email clients ignore or strip <style> blocks entirely. Gmail — by far the most widely used email client — removes any CSS from the <head> for emails viewed in its default context, including the Gmail app on Android and iOS and the Gmail web interface. Outlook on Windows uses the Microsoft Word rendering engine, which has its own severely limited CSS support. Yahoo Mail and many corporate mail clients apply similar restrictions.

The result: an email that looks perfect in your browser can look completely broken in the inbox. Columns collapse, fonts revert to Times New Roman, colors disappear, and spacing falls apart. The fix is to move every CSS declaration directly onto the HTML element it targets as an inline style attribute — the one form of CSS that every email client universally supports.

ESPs like Mailchimp, Klaviyo, HubSpot, Campaign Monitor, and Salesforce Marketing Cloud all recommend inlining CSS before uploading your HTML. Some platforms do this automatically during send, but their implementations vary — running your own inliner before upload gives you full control and lets you verify the output before it reaches your list.

How it works

Write your email HTML with a <style> block in the <head> as you normally would — this keeps your source clean and maintainable.
Paste the HTML into the editor above, or drag and drop an .html file.
Configure options — choose whether to preserve media queries (for responsive layouts), keep pseudo-selectors like :hover, remove the <style> block after inlining, and whether to minify the resulting inline style attributes.
Click “Inline CSS.” All rules from your <style> block are applied directly to each matching HTML element.
Copy or download the inlined HTML and paste it into your ESP’s HTML editor.

Frequently asked questions

Why does Gmail strip CSS from emails?

Gmail was designed with security and rendering consistency as priorities. Allowing arbitrary <style> blocks in emails would create risks for CSS injection and layout attacks, and would produce inconsistent rendering across the many surfaces where Gmail displays email (web, iOS, Android, AMP). Inline styles are scoped to individual elements and pose no such risk, so they are preserved.

Which ESPs require CSS inlining?

All of them benefit from it. Gmail and Outlook are the most common sources of broken styling, and both are served by inlining. Mailchimp’s code editor, Klaviyo’s HTML block, HubSpot’s custom email, and Campaign Monitor’s code editor all accept raw HTML — whatever you upload is what gets sent, so inlining beforehand is the safest approach.

Will my media queries still work after inlining?

Yes, if you enable the “Preserve media queries” option. Media queries inside <style> blocks cannot be inlined (they are not element-level rules), so the tool keeps them in a <style> block specifically for clients that do support them — like Apple Mail and newer versions of Outlook on Mac. Clients that strip <style> will simply ignore the media queries, falling back to the inlined styles.

What happens to `:hover` and `:focus` styles?

Pseudo-selectors like :hover and :focus cannot be inlined by definition — they are state-based and only apply when triggered. The “Preserve :hover / :focus” option keeps them in a <style> block for clients that support them (Apple Mail, some webmail clients). Most email clients, including Gmail and Outlook, will ignore them.

Does inlining increase file size?

Yes — inlining duplicates CSS declarations across every element that matches a rule, rather than defining them once in a <style> block. The size increase depends on how many unique selectors your CSS has and how many elements they match. Enable the “Minify inlined styles” option to strip whitespace from style attribute values and reduce the overhead. If file size is a concern after inlining, run the result through the HTML Minifier as the next step.

HTML Minifier — Compress your inlined HTML to stay under Gmail’s 102KB clip limit.
Spam Word Scanner — Check your email copy for phrases that trigger spam filters before you send.