CSS Inliner
What a CSS Inliner is actually for
Email is not a browser tab. Gmail, Outlook, Apple Mail, and most ESP preview panes apply their own rules about which CSS they will respect. A `<link rel="stylesheet">` pointing at your brand CSS file is often ignored. A `<style>` block in the `<head>` may survive in some clients and vanish in others. What tends to work everywhere is plain HTML with presentation written as `style` attributes on the tags that need it. That is the job of a CSS Inliner: you keep authoring structure in HTML and rules in CSS the way you already do for the web, then run one pass that copies matching declarations onto each element. The file you paste into Mailchimp, Klaviyo, or a transactional pipeline is still HTML, but it no longer depends on a separate stylesheet loading correctly. This page is built for that handoff. Paste markup, add CSS in its own tab or inside the HTML, click Inline CSS, and read the result on the right. When it looks right, copy it, download a `.html` file, or open Preview HTML on our homepage playground to click through the layout before you send a test message.
External stylesheets and embedded CSS, not just one source
Many online inliners assume your CSS already lives inside the HTML—typically a `<style>` tag you exported from a design tool. That works until your project is split the normal way: `template.html` plus `styles.css` from a build step, a Figma handoff, or a static site generator. You are then stuck merging files by hand or running a CLI you only need twice a quarter. Our CSS Inliner treats both cases as first-class input. Put markup in the HTML tab and rules in the CSS tab, or import up to two files at once (`.html` and `.css`). Rules from the CSS tab are applied to the document together with any `<style>` blocks already in the HTML. The output is a single HTML string with inline `style` attributes on the matched elements and those `<style>` tags removed, which is what most email workflows expect. That difference matters for newsletters and lifecycle mail alike. Campaign developers often maintain shared CSS files for typography and buttons while HTML fragments come from different authors. Product teams paste a module from the app and a stylesheet from the design system. In all of those cases you need the inliner to read external CSS, not only CSS that was already embedded in the markup.
We run in the browser after load—no upload queue, no account. Pseudo-classes such as `:hover`, pseudo-elements, and selectors the parser cannot resolve are skipped and listed in the Notes panel so you know what did not make it into the inline pass. Simple `@media` blocks are flattened for inlining; responsive behavior in the inbox will still differ from a live website, so always send a real test to your target clients. When you want to sanity-check spacing or click an element to compare against your source, use Preview HTML to send the inlined output to the homepage playground. You get the same HTML/CSS/JS preview environment as the rest of the site, which is useful for catching a missing class or an over-wide table before the ESP does.
Open the CSS InlinerHTML tab + CSS tab
Keep structure and presentation separate while you edit, the way you would in a repo. Run Inline CSS when you are ready to produce the send-ready file.
Import a pair of files
Load an `.html` and a `.css` in one action instead of pasting two buffers together and hoping nothing was truncated.
Preview on the homepage
Send inlined HTML to the main playground in a new tab when you want a visual pass before copy-paste into your ESP.
A CSS inliner for email that accepts external stylesheets
Most tools only rewrite CSS that is already embedded in the HTML. Here you can inline from a separate CSS file, from `<style>` tags in the markup, or both in one run—then copy, download, or preview the result.
Inline CSS from a file, not only from a `<style>` block
If your workflow keeps `email.css` next to `template.html`, import both or paste into the two tabs. The inliner maps selectors to elements and writes declarations into `style` attributes—the format inbox clients expect. You do not have to manually merge a stylesheet into the document before the tool will touch it. Embedded `<style>` sections in the HTML are processed in the same pass, so a template that mixes inline-ready modules with a shared head block still converts in one click. The right-hand panel shows the full inlined HTML read-only so you can scroll the output without accidentally editing the send copy. Copy from the toolbar icon on the output header, download `inlined.html`, or use Preview HTML when you want the homepage playground. Processing stays local; nothing is sent to a server for conversion.
- Separate CSS tab for real project layouts
- Embedded `<style>` and external CSS in one pass
- Notes panel for skipped selectors
- Runs locally—no upload
How to inline CSS for HTML email templates
Add your HTML and CSS
Paste the template into the HTML tab. Put shared rules—buttons, typography, layout utilities—in the CSS tab, or import `.html` and `.css` together. If your draft still has `<style>` in the head, leave it; those rules are inlined too.
Run Inline CSS
Click Inline CSS to apply matching rules as `style` attributes. Check the Notes panel for anything that was skipped. The output panel updates on the right; your source tabs on the left stay editable so you can adjust selectors and run again.
Verify, then ship
Copy the output, download the file, or open Preview HTML on the homepage playground. Paste into your ESP, send a test to Gmail and Outlook, and keep the downloaded `.html` as the version you approved.
CSS Inliner FAQ
Ready to inline CSS for your next send?
Paste HTML, add external or embedded CSS, run Inline CSS, and download when the output matches your test inbox.
CSS Inliner
- External `.css` plus HTML in one run
- Embedded `<style>` blocks inlined too
- Preview HTML on the homepage playground
- No signup; use the tool in the browser
Send a real test message after inlining—client quirks beat any preview.
One file for your ESP
Inline once, paste into the campaign, archive the approved HTML.