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.

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 word counter 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 dark mode 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

Why do I need to inline CSS for emails?

Most email clients strip <style> blocks or limit which CSS properties they support. Gmail removes <style> tags in many contexts, Outlook uses the Word rendering engine which ignores most CSS, and Yahoo Mail has its own quirks. Inlining styles directly on elements is the only reliable way to ensure your email looks correct across all major email clients.

Does this tool handle media queries?

Media queries cannot be inlined since they are conditional rules that depend on screen size. This tool removes @media blocks during inlining. If you need responsive email designs, keep your media queries in a separate <style> block in the <head> of your HTML. Apple Mail, iOS Mail, and the Gmail app support embedded <style> tags with media queries.

What CSS selectors are supported?

The tool supports element selectors (p, h1, td), class selectors (.header, .content), ID selectors (#main), compound selectors (div.header, .container p), and grouped selectors (h1, h2, h3). It handles CSS specificity correctly, so more specific selectors override less specific ones. Pseudo-classes like :hover are parsed but cannot be meaningfully inlined.

Will existing inline styles be preserved?

Yes. Existing inline styles always take the highest priority, just like in a browser. If an element already has style="color: red" and a CSS rule tries to set color: blue, the inline red will be preserved. New properties from CSS rules that do not conflict with existing inline styles will be added.

Should I remove <style> blocks after inlining?

This tool automatically removes <style> blocks after extracting and inlining the rules. However, some email developers keep a copy of media queries and @font-face rules in a <style> block for clients that support them (like Apple Mail and Gmail App). This progressive enhancement approach gives you the best of both worlds.

What about CSS shorthand properties?

The tool handles shorthand properties as-is. For example, 'padding: 10px 20px' will be inlined as 'padding: 10px 20px'. Some email clients have better support for longhand properties (padding-top, padding-right, etc.), so if you see rendering issues, try expanding shorthand into individual properties in your source CSS.

Is this tool suitable for production email campaigns?

Yes. The inlining approach matches what professional email service providers like Sequenzy, Mailchimp, and Campaign Monitor do behind the scenes. For best results, start with table-based layouts, use web-safe fonts, avoid CSS properties that email clients do not support (like flexbox or grid), and always test your inlined HTML in an email testing tool.

Can I use this with emails built in frameworks like MJML or React Email?

MJML and React Email already produce inlined output, so you typically do not need this tool for those. This tool is most useful when you have hand-coded HTML with separate CSS, HTML exported from a design tool, or legacy email templates that use <style> blocks. It bridges the gap between web-style CSS and email-compatible inline styles.

Compare email marketing software

Hands-on roundups to help you pick the right platform.

More Free Tools

View all tools

Email Name Generator

Generate professional email address ideas based on your name. Create variations for Gmail, Outlook, Yahoo, and more with our free email username generator.

Email Signature Generator

Create professional HTML email signatures for Gmail, Outlook, and Apple Mail. Choose from multiple styles and customize with your contact info and social links.

HTML Email Button Generator

Create bulletproof HTML email buttons that work in Gmail, Outlook, Apple Mail, and all major email clients. Includes VML fallback for perfect Outlook rendering.

Email Preheader Generator

Generate compelling email preheader text that complements your subject line. The preheader is the preview text shown after the subject line in most email clients.

Related reading