CSS Inliner for Email
Convert your CSS styles to inline attributes for maximum email client compatibility. Paste your HTML with <style> tags and get inlined output.
Paste Your Email HTML
Paste HTML with <style> tags. We'll inline all CSS rules directly onto elements for maximum email client compatibility.
Why inline CSS?
Many email clients (Gmail, Outlook, Yahoo) strip <style> tags from emails. Inlining CSS converts your styles to inline style="" attributes on each element, ensuring your email looks correct everywhere.
CSS Inlining Tips
Keep Some Styles
Media queries and @media (prefers-color-scheme) for dark mode can't be inlined. Keep these in a <style> tag for responsive and dark mode support.
Use Tables
Table-based layouts work best in emails. CSS Grid and Flexbox have limited support. Use nested tables for reliable layouts across all email clients.
Shorthand Properties
Avoid CSS shorthand like font. Use longhand: font-family, font-size, etc. for better client support.
Email Client <style> Support
| Email Client | <style> in <head> | Inline Styles |
|---|---|---|
| Apple Mail (macOS/iOS) | ✓ | ✓ |
| Gmail (Web/Apps) | Partial | ✓ |
| Outlook 365/2021 (Windows) | ✓ | ✓ |
| Outlook.com / Outlook Apps | ✓ | ✓ |
| Yahoo Mail | ✗ | ✓ |
| AOL Mail | ✗ | ✓ |
Bottom line: Inline styles work everywhere. <style> tags don't. Always inline for production emails.