Most email clients strip style tags and external stylesheets from HTML emails, breaking your carefully designed layouts. The solution is to inline all CSS by converting stylesheet rules into style attributes on each HTML element. This tool takes your HTML with embedded or internal CSS and produces email-ready HTML with all styles inlined.
Supported Selectors
h1, p, div.classname#idnamep.classname, div#idh1, h2, h3.class1.class2Limitations
:hover, ::before) are skippedPaste your HTML with embedded or linked CSS styles into the input field. Click 'Inline CSS' and the tool converts all CSS rules to inline style attributes on each HTML element. The output is email-client-ready HTML that renders correctly in Gmail, Outlook, Yahoo Mail, and Apple Mail. Note that media queries are not supported and will be stripped during inlining.
CSS inlining is essential for HTML email development - most email clients strip style tags and external stylesheets. It is used when building marketing email campaigns, transactional email templates (order confirmations, password resets), newsletter designs, automated notification emails, and any HTML content sent through email service providers like SendGrid, Mailchimp, Amazon SES, or Postmark.
The inliner parses the HTML using DOMParser, extracts all style elements, parses CSS rules into selector-property pairs, matches selectors against DOM elements using querySelectorAll(), and applies properties as inline style attributes. CSS specificity rules are respected - more specific selectors override less specific ones. Shorthand properties (margin, padding, font) are preserved. Media queries and pseudo-selectors (:hover, :focus) are not supported and are removed during inlining.
Most email clients (Gmail, Outlook, Yahoo Mail) strip <style> tags and ignore external stylesheets. Only inline styles (style="...") are reliably supported across email clients. Inlining CSS ensures your email renders correctly everywhere.
Modern versions of Apple Mail, iOS Mail, and some Gmail configurations support <style> tags. However, Outlook (desktop and web), older Gmail, and Yahoo Mail strip them. For maximum compatibility, always inline your CSS.
Media queries cannot be inlined and are not supported by this tool. They are removed during the inlining process. For responsive email layouts, consider using table-based layouts or separate conditional comments for different email clients.
Transform, format, generate, and encode data instantly. Private, fast, and always free.
Browse All Tools