CSS Inliner for HTML Email
Prepare HTML emails for Gmail, Outlook, Apple Mail, and Yahoo by automatically inlining all CSS rules into element style attributes.
Step-by-Step Instructions
Paste HTML & CSS
Paste complete HTML markup with embedded `<style>` tags or external CSS rules.
Configure Inlining Options
Select whether to remove original `<style>` blocks, preserve media queries, or strip unused CSS classes.
Run CSS Inlining Engine
Convert cascading CSS classes and selectors directly into inline `style="..."` attributes on every HTML element.
Copy Production Email HTML
Copy the email-client-ready HTML code directly into Mailchimp, SendGrid, HubSpot, or Klaviyo.
Key Features & Capabilities
- High-precision CSS cascade specificity resolver injecting computed styles into inline `style="..."` attributes
- Automatic preservation of responsive `@media` queries and `@keyframes` animations inside `<style>` blocks
- Conversion of class selectors, ID selectors, pseudo-elements, and attribute selectors
- Full rendering compatibility across Gmail, Microsoft Outlook (Word engine), Apple Mail, and Yahoo Mail
Frequently Asked Questions
Why must CSS be inlined for HTML email templates?
Major email clients—especially desktop Microsoft Outlook (which uses the Microsoft Word rendering engine) and various versions of Gmail and Yahoo Mail—strip out external stylesheets and often ignore `<style>` blocks in the `<head>`. Inlining CSS rules directly into `style="..."` attributes on each HTML tag guarantees consistent rendering across all email clients.
How does the inliner handle responsive media queries (@media)?
Media queries cannot be placed inside inline `style` attributes. Our inliner intelligently inlines all desktop base styles onto HTML elements while preserving responsive `@media (max-width: 600px)` blocks in the `<head>`, ensuring mobile-responsive email layouts render properly on smartphones.
What CSS properties are ignored by desktop Microsoft Outlook?
Desktop Outlook ignores modern CSS features including Flexbox, CSS Grid, `max-width`, `border-radius`, background gradients, and web fonts. Email HTML must rely on nested `<table>` structures and inline styles (`mso-` vendor prefixes) for bulletproof Outlook compatibility.
Does CSS inlining increase email HTML file size?
Yes. Inlining duplicates style declarations across repeated elements (e.g., table cells), increasing total HTML byte size. Email developers must ensure the final inlined HTML remains **under 102 KB** to prevent Gmail from clipping the email with the message: *'[Message clipped] View entire message'*.
Related Utilities
Discover complementary online tools in the same workflow.
JSON Formatter & Validator
Format, beautify, minify, validate, and view JSON data online with instant syntax highlighting and error detection.
Base64 Encoder & Decoder
Encode text or binary data into Base64 format or decode Base64 back into raw string format.
CSV to JSON Converter
Easily convert CSV data to clean JSON format. Turn tabular spreadsheets into structured JSON.
YAML to JSON Converter
Convert YAML configuration files into structured JSON for APIs and modern web tooling.
JWT Parser & Token Debugger
Decode JWT tokens to view header, payload claims, and expiration status without sending secrets anywhere.
Hash Generator (SHA-256, SHA-512, MD5)
Generate cryptographically secure SHA-256, SHA-512, SHA-384, and SHA-1 hashes for any text.