DevToolKit

CSS Inliner - Optimize HTML Emails Free Online

Inline CSS styles into your HTML instantly for perfect email client compatibility. Supports variables, preserves media queries, and ensures Outlook compatibility.

Inliner Settings

Delete empty <style>
Keep @media in head
Keep important flags
Add to tables/images
Apply align, valign, etc.
Email Compatibility

Most email clients (like Outlook and Gmail) ignore external stylesheets. Inlining moves your CSS directly into the HTML elements' style="..." attributes to guarantee it renders correctly everywhere.

Output
<!DOCTYPE html>
<html>
<head>
  <style>
@media (max-width: 600px) {
  .card {
    width: 100%;
    padding: 10px;
  }
}
</style>
</head>
<body style="font-family: Arial, sans-serif; background-color: #f3f4f6; margin: 0; padding: 20px;">
  <div class="card" style="background: #ffffff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 400px; margin: 0 auto;">
    <h2 style="color: #111827; margin-top: 0;">Welcome to DevToolkit</h2>
    <p style="color: #4b5563;">This email template will be inlined.</p>
    <a href="#" class="btn" style="display: inline-block; background-color: #4f46e5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-weight: bold;">Confirm Email</a>
  </div>
</body>
</html>
Was this tool helpful?

How to Use

A CSS inliner is a tool that takes an HTML document containing standard <style> blocks or external stylesheets and injects those styles directly into the style="..." attributes of the HTML elements.

How to use the CSS Inliner

  1. Paste your HTML: Paste your complete email template (including the <head>, <style>, and <body> tags) into the Source HTML editor.
  2. Configure Settings:
    • Remove Style Tags: Automatically deletes any <style> blocks from the <head> that have been fully inlined, keeping your final HTML payload small and clean.
    • Preserve Media Queries: Mobile responsiveness requires media queries to stay in the <head>. This tool safely ignores @media rules during inlining and leaves them intact.
    • Width/Height & Table Attributes: Optionally converts CSS width/height into HTML attributes (width="100"), which is a requirement for older Outlook rendering engines.
  3. Preview & Export: Switch between the Code tab to view the raw output, or the Preview tab to see a live render of your inlined email. Copy or download the result.

About This Tool

The Outlook Challenge

Microsoft Outlook (specifically the Windows desktop versions from 2007 to 2019) uses Microsoft Word's HTML rendering engine. This engine has notorious limitations:

  • No Flexbox or Grid: You cannot use display: flex or display: grid.
  • Requires Tables: Complex layouts must be built using <table>, <tr>, and <td> elements.
  • Strict Attribute Rules: CSS widths often fail, requiring explicit HTML width="..." attributes.

Our CSS inliner helps mitigate these issues by automatically applying widths and table attributes, giving you a better baseline for Outlook compatibility.

Why Use This Tool

Client-Side Security

Your email templates often contain sensitive links, proprietary brand assets, or internal testing data. This tool runs 100% in your browser. Your HTML source code is never uploaded to any remote server, ensuring your data remains completely private.

FAQ

Why do I need to inline CSS for emails?
Most email clients (Gmail, Outlook, Yahoo) strip or ignore <style> tags and external CSS files. By moving styles directly into the style attribute of each element, you ensure the design renders correctly across all clients.
Are media queries preserved?
Yes. Media queries cannot be inlined (they are block-level declarations), so the tool preserves them in a <style> block inside the <head>. Clients that support media queries (like Apple Mail and iOS) will apply them for responsive design.
Does it work with Outlook?
Yes. Outlook for Windows uses Word's rendering engine, which has very limited CSS support. Inlining all styles maximizes compatibility. However, some modern CSS properties like flexbox and grid are not supported by Outlook regardless of the application method.
Is my HTML sent to a server?
No. All inlining processing is performed entirely in your browser. Your HTML and CSS never leave your device.
NavigateOpenEscClose