Back to Tools

CSS Inliner for Email

Convert CSS stylesheets to inline styles for maximum email client compatibility. Paste your HTML with embedded styles or add external CSS, and get email-ready HTML with all styles inlined.

Input

CSS from <style> blocks in the HTML is automatically extracted and inlined. Use this field for additional external CSS.

Like this tool? Try Sequenzy for free

AI-powered email marketing with Stripe integration, automations, and built-in analytics.

About this tool

Most email clients strip or ignore <style> blocks and external stylesheets. Gmail, Outlook, and Yahoo Mail all handle CSS differently, and the only reliable way to ensure your styles render correctly is to inline them directly on each HTML element. This tool does that conversion automatically, saving you from tedious manual work.

The inliner extracts CSS rules from <style> blocks in your HTML and from any additional CSS you provide, then applies them as inline style attributes on matching elements. It respects CSS specificity, so more specific selectors correctly override less specific ones. Existing inline styles are preserved and take highest priority, just like in a real browser.

How it works

The tool processes your HTML in several steps. First, it extracts all <style> blocks and parses the CSS rules. Then it evaluates each CSS selector against every HTML element, collecting matching styles. Rules are applied in specificity order, so .header h1 correctly overrides h1. Finally, it removes the <style> blocks and outputs clean HTML with all styles inlined.

What gets handled

The inliner supports element selectors (p, h1, td), class selectors (.header), ID selectors (#main), and compound selectors. It strips out @media queries, @keyframes, @import, and @font-face rules since these cannot be inlined. If your email uses responsive design with media queries, consider keeping a separate <style> block for those rules since some clients like Apple Mail and Gmail App do support embedded styles.

Pair with other email tools

After inlining your CSS, check the email size to make sure the inlined styles do not push your email past Gmail's 102 KB clipping limit. Run the output through the CAN-SPAM checker to verify compliance, and use the accessibility checker to catch any issues. You can also preview how your inlined email looks on different screen sizes with our responsive preview tool.

If you are building emails from scratch, check out the HTML button generator for bulletproof CTA buttons and the footer generator for compliant email footers. Both generate already-inlined HTML that works across all email clients.

Frequently Asked Questions