Why does Gmail strip CSS styles?

Gmail removes blocks from the in many contexts, only allowing inline styles. This is a long-standing Gmail limitation. Use inline CSS or a CSS inliner tool to ensure your styles work in Gmail.

Why doesn't Outlook support flexbox?

Outlook uses Microsoft Word's rendering engine (not a browser), which has very limited CSS support. For reliable Outlook rendering, use HTML tables for layout instead of flexbox or grid.

Is this a real email send test?

No — this is a browser-based preview only. For live deliverability and spam testing, use a dedicated service. This tool helps you catch CSS issues before sending.

Email Template Tester

Runs in browser

Preview HTML emails in Gmail, Outlook, Apple Mail, and mobile with compatibility warnings.

Preview and test HTML email templates across Gmail, Outlook, Apple Mail, and mobile clients. Detect CSS compatibility issues, substitute template variables, and test dark mode rendering.

Gmail warnings

⚠️Gmail strips <style> from <head> — use inline styles instead

⚠️Consider a table-based layout for maximum compatibility

Variable values

HTML template

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f4f4f4; }
    .container { max-width: 600px; margin: 20px auto; background: white; border-radius: 8px; overflow: hidden; }
    .header { background: #6366f1; padding: 32px 24px; }
    .header h1 { color: white; margin: 0; font-size: 24px; }
    .body { padding: 24px; }
    .cta { display: inline-block; background: #6366f1; color: white; padding: 12px 24px; border-radius: 6px; text-decoration: none; }
    .footer { padding: 16px 24px; color: #999; font-size: 12px; text-align: center; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Welcome, {{name}}!</h1>
    </div>
    <div class="body">
      <p>Hi {{name}},</p>
      <p>Thanks for signing up to <strong>{{product}}</strong>. Your account is ready.</p>
      <p><a href="{{url}}" class="cta">Get Started →</a></p>
    </div>
    <div class="footer">
      <p>You received this email because you signed up for {{product}}.</p>
    </div>
  </div>
</body>
</html>

Gmail preview (600px)

🔒 Runs in your browser · No uploads · Your data never leaves your device

How to use

Paste your HTML template
Enter your email HTML in the left editor. Template variables like {{name}} are automatically detected.
Select the email client
Click Gmail, Outlook, Apple Mail, or Mobile to see a preview at the correct width with client-specific warnings.
Fill in variables
If your template has {{variable}} placeholders, fill in test values to see the rendered output.
Fix warnings
Review the compatibility warnings — they flag known issues like Gmail stripping <style> tags or Outlook ignoring flexbox.

Common use cases

Checking Gmail CSS compatibility before sending — Preview your HTML email in Gmail view to catch style issues like stripped <style> tags before the campaign goes out.
Testing variable substitution — Fill in {{name}} and {{product}} template variables to verify that personalized email output looks correct.

Examples

Welcome email with variables
HTML welcome email using {{name}} and {{product}} variables, tested in Gmail view
Output
```
Preview with variables substituted + warning: Gmail strips <style> from <head>
```

Frequently asked questions

Why does Gmail strip CSS styles?: Gmail removes <style> blocks from the <head> in many contexts, only allowing inline styles. This is a long-standing Gmail limitation. Use inline CSS or a CSS inliner tool to ensure your styles work in Gmail.
Why doesn't Outlook support flexbox?: Outlook uses Microsoft Word's rendering engine (not a browser), which has very limited CSS support. For reliable Outlook rendering, use HTML tables for layout instead of flexbox or grid.
Is this a real email send test?: No — this is a browser-based preview only. For live deliverability and spam testing, use a dedicated service. This tool helps you catch CSS issues before sending.

Key concepts

Inline CSS: CSS applied directly on HTML elements via the style attribute — required for reliable rendering across email clients that strip <style> blocks.
Email client: The application that renders HTML emails — Gmail, Outlook, Apple Mail, and mobile clients each have different CSS support levels.

You might find these useful too.

More text tools

Text Diff Checker
Compare two texts and view line-by-line differences instantly.
Open