Ghost Newsletter HTML & CSS: What Email Clients Actually Support (And What Breaks)

You spent an hour styling a post with custom CSS classes, embedded code blocks, and some modern layout tricks. You hit publish, select your subscribers, and... nothing arrives. Or worse — everything arrives, but it's mangled. A growing number of Ghost users are hitting exactly this wall, and the error message doesn't help: TypeError: Cannot read properties of undefined (reading 'match').

That cryptic crash comes from Juice, the CSS-inlining library Ghost uses to prepare emails before sending. It tries to translate your post's styles into inline CSS that email clients can render. When it hits something too modern to process, it fails silently on the surface — and noisily in the logs. The forum thread discussing this has no replies yet, which tells you this is a fresh pain point that most people suffer alone.

This guide explains what's happening inside Ghost's email pipeline, which HTML and CSS features actually survive delivery to Gmail, Outlook, and Apple Mail, and how to write newsletter-ready content without crippling your web design.

Quick answer: Ghost uses the Juice library to inline CSS before sending newsletters. Modern CSS (CSS Grid, custom properties, some flexbox patterns) causes Juice to throw a TypeError and fail silently. Keep newsletter posts using basic inline styles, standard HTML elements, and avoid CSS not supported by Outlook 2019 or older email clients. Check caniemail.com for compatibility.

How Does Ghost Send Newsletter Emails?

Ghost doesn't just copy your post HTML and fire it into Mailgun or your SMTP provider. It runs the content through a multi-step pipeline:

1. Ghost extracts the post HTML from its Lexical editor format
2. It runs Juice to convert any stylesheet CSS into inline style="" attributes — because many email clients strip or ignore <style> tags
3. The inlined HTML is wrapped in a newsletter template you've configured in Settings → Newsletter
4. The final payload goes to your mail provider (Mailgun, Amazon SES, or another SMTP relay)

Step 2 is where things break. Juice was built to support the reality that email clients, especially Outlook, lag years behind modern browser CSS support. When Juice encounters a CSS construct it doesn't know how to inline — often something using CSS custom properties like var(--color), grid-template-areas, or certain calc() expressions — it can throw an unhandled exception. Ghost's error handling doesn't always surface this clearly to the user.

The result: your newsletter fails to send, or subscribers receive a broken version without any explanation in the Ghost admin UI.

Which Email Clients Are the Problem?

The short answer: Outlook. The long answer involves nearly every desktop email client from the last decade.

Email Client	CSS Support Level	Key Limitations
Gmail (web)	Good	Strips <style> blocks in some cases; supports inline well
Apple Mail	Excellent	Near-browser-level support
Outlook 2019/365 (desktop)	Poor	Uses Word rendering engine; no flexbox, grid, custom properties
Outlook on the Web	Moderate	Better than desktop but still strips <style>
Samsung Mail	Moderate	Limited media query support
Thunderbird	Good	Generally reliable for standard CSS

The key reference is caniemail.com — think of it as Can I Use, but for email. Before adding any CSS to a Ghost newsletter post, check it there. If Outlook 2019 shows red, it will likely cause problems.

If you've been struggling with the root cause of newsletters failing to dispatch, the Ghost CMS newsletter not sending CSS fix guide covers the specific Juice error in more depth.

What CSS Features Break Ghost Newsletter Sending?

These are the main offenders that cause Juice to choke or produce broken output:

• CSS custom properties (var(--color-primary)) — Juice doesn't resolve them; output is literally style="color: var(--color-primary)" which email clients ignore
• CSS Grid (display: grid) — Not supported in Outlook; Juice may fail inlining complex grid declarations
• Complex calc() expressions — Simple math works; nested or variable-based calc breaks
• CSS animations and transitions — Stripped entirely; can cause Juice parse errors
• Pseudo-elements (::before, ::after) — Can't be inlined; Juice skips them but may error on complex selectors
• Modern selectors (:is(), :where(), :has()) — Juice doesn't understand them
• Custom HTML card with complex CSS — Any <style> block inside an HTML card using unsupported syntax

The Juice error that forum users are seeing — TypeError: Cannot read properties of undefined (reading 'match') — typically fires when Juice tries to parse a selector or value it can't interpret at all. It's not a graceful "skip this property" failure; it's a full crash.

What HTML and CSS Does Work in Ghost Newsletters?

The good news: standard, table-based or simple block-layout HTML with inline styles works reliably. Here's what you can use confidently:

Safe HTML elements:

• <p>, <h2>, <h3>, <ul>, <ol>, <li>
• <table>, <tr>, <td> — still the most reliable layout method for emails
• <img> with explicit width/height attributes
• <a> with inline color styling
• <blockquote> with inline border-left styling
• <hr> for dividers

Safe CSS properties (inline only):

/* These work reliably across email clients */
color: #333333;
background-color: #f4f4f4;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.6;
padding: 12px 16px;
margin: 0 0 16px 0;
border: 1px solid #dddddd;
border-left: 4px solid #4a6cf7;
text-align: left;
font-weight: bold;
text-decoration: none;
max-width: 600px;
width: 100%;

Ghost's own newsletter template already applies sensible defaults for body text, headings, and links. You usually don't need to add inline styles to basic paragraphs — Juice handles those from the template stylesheet. Where you run into trouble is when you add custom HTML cards with style blocks, or when your theme's CSS uses modern properties that get pulled in.

If you want to customize your newsletter template directly, Ghost's built-in editor at Settings → Newsletter handles font, color, and header/footer options without any CSS risk. For deeper changes, the Ghost theme CSS customization with Yarn guide covers local dev workflow, but remember: theme CSS changes affect the web version; your newsletter template is separate.

How Do I Write Newsletter Posts That Don't Break?

The safest approach: treat each post you plan to send as a newsletter as a separate content type. Write it like you'd write an email — not like you'd write a web article.

Practical rules:

1. No custom HTML cards with <style> blocks. If you need a callout box, use Ghost's built-in callout card or a simple HTML card with only inline styles.
2. Avoid code blocks for newsletter-only posts. Ghost's code card looks fine on the web but uses pre/code with monospace fonts and backgrounds that some email clients mangle. If you must include code, use a blockquote with inline styling instead.
3. Skip embeds. Twitter/X cards, YouTube embeds, and other oEmbed content either don't render in email or produce broken markup. Link to the content instead.
4. Use Ghost's email-only toggle. You can mark content as "email only" or "web only" inside the editor using visibility toggles. Use this to show a simpler version in the email while keeping rich content for web readers.
5. Send yourself a test first. Before publishing to your list, use the "Send test email" option. Check it in both Gmail and Outlook if possible. Outlook 365 desktop is the one that will expose problems.

For alternative email setups that might give you more control over rendering — like replacing Mailgun with a self-hosted solution — the Ghost Mailgun alternatives guide covers options like Amazon SES, Brevo, and Postmark.

Why Does My Newsletter Look Different in Gmail vs Outlook?

This is one of the most common complaints on the Ghost forum. The same email can look polished in Apple Mail, acceptable in Gmail, and completely broken in Outlook. The reasons:

• Outlook uses Microsoft Word's rendering engine (since Outlook 2007), not a browser engine. It supports CSS roughly equivalent to what Internet Explorer 6 could do.
• Gmail strips <style> tags from emails in some contexts (particularly forwarded messages and older Gmail apps), which is why Juice's job of converting to inline styles matters so much.
• Font support varies. Google Fonts don't load in most email clients. Stick to web-safe system fonts: Georgia, Arial, Helvetica, Times New Roman, Trebuchet MS.
• Images behave differently. Outlook blocks images by default until the user clicks "Download pictures." Always use alt text. If your layout depends on images to look right, it'll look broken to many Outlook users.

If you're trying to grow your newsletter audience and reduce churn from poor email experience, the Ghost retention offers guide pairs well here — members who get broken-looking emails are more likely to unsubscribe.

Can I Use Ghost's Email-Only Card for Rich Formatting?

Yes — Ghost has a dedicated "Email only" card type in the editor. It lets you add content that appears only in the email version (not on the web), or hide content from the email entirely. This is useful for adding a simplified version of complex web content.

However, the same CSS rules apply inside email-only cards. The content still goes through Juice. So if you put a fancy HTML layout with CSS Grid inside an email-only card, it'll fail the same way.

What email-only cards are actually good for:

• Adding a personal note or greeting that only newsletter subscribers see
• Including an unsubscribe reminder or call to action formatted for email
• Swapping out a complex embed for a simple link + description

For sending full post content versus excerpts in your newsletter, Ghost's Newsletter settings (Settings → Newsletter → Email content) lets you choose between sending the full post or just the excerpt with a "Continue reading" link. The latter avoids CSS issues entirely since it only sends minimal HTML.

What Happens When Ghost Says the Email Failed?

If a newsletter fails to send entirely, Ghost shows an error in the Publish flow or in the Email logs (Admin → Emails). The Juice TypeError typically surfaces in Ghost's process logs, not the admin UI — so you may see "Email failed" without a clear reason.

Troubleshooting steps:

1. Check Ghost's logs: ghost log or journalctl -u ghost_* --since "1 hour ago". Look for TypeError or juice in the output.
2. Test with a simple post: Create a new post with only text and no custom HTML. If that sends, the issue is in your post's CSS/HTML content.
3. Remove HTML cards one by one: If your post has multiple HTML cards, remove them progressively to find the one causing Juice to fail.
4. Check for inline <style> blocks in any HTML you've added. Replace style tags with inline style="" attributes.
5. Look for var(--) or grid in any custom CSS you've added — these are the most common culprits.

If your site keeps having issues sending (not just CSS-related), the Amazon SES setup guide walks through an alternative mail provider configuration that sometimes resolves provider-specific sending failures. And if confirmation emails are going to 404 rather than broken content, that's a different issue covered in the Ghost confirmation email 404 fix.

Does Ghost Plan to Fix the Juice Error Handling?

The Juice library itself is maintained separately from Ghost. Ghost could improve error handling to surface the failure message clearly in the admin UI rather than logging it in process output, but the root constraint — Juice's handling of modern CSS — is an upstream dependency issue.

The community workaround is straightforward: keep newsletter-bound posts simple. Ghost's philosophy is that your web design and your email design are separate concerns. The web view supports full modern CSS; the email view needs to work in Outlook 2019.

For Ghost Pro users hitting the frozen admin panel issue (a separate but related frustration), that's typically a CDN or browser extension conflict rather than a CSS problem — clear your cache and try an incognito window first.

Related Ghost Guides

• Ghost CMS Newsletter Not Sending: The CSS Fix Nobody Tells You — Deeper dive into the specific CSS error and the Juice fix
• Ghost CMS Mailgun Alternatives — Switch to Amazon SES, Brevo, or Postmark for newsletter sending
• Ghost CMS Amazon SES Setup — Configure transactional and newsletter email via SES
• Ghost Confirmation Email Link Goes to 404 — Fix broken magic links and signup emails
• Ghost Theme CSS Customization with Yarn — Customize your web theme without affecting email
• Ghost vs Substack — Compare newsletter platforms if you're weighing your options
• Full-Width HTML Embeds in Ghost — Safe HTML embed techniques for web posts

Frequently Asked Questions

Why does Ghost newsletter sending fail with a TypeError?

Ghost uses the Juice library to convert CSS into inline styles before sending email. When Juice encounters modern CSS it can't parse — like CSS custom properties (var(--)), CSS Grid declarations, or unsupported selectors — it throws TypeError: Cannot read properties of undefined. The fix is removing modern CSS from any HTML cards in the post you're trying to send.

What CSS is safe to use in Ghost newsletter emails?

Stick to basic properties with fixed values: color, background-color, font-family, font-size, padding, margin, border, text-align, and font-weight. Use pixel or hex values — not custom properties or percentage-based calc expressions. Use caniemail.com to verify anything you're unsure about.

Does Ghost email support CSS Grid or Flexbox?

Not reliably. CSS Grid is unsupported in Outlook (which still uses the Word rendering engine). Flexbox has partial support. Ghost's Juice inlining step may crash on complex Grid declarations. For email layouts, use table-based HTML or simple block stacking instead.

Why does my Ghost newsletter look different in Gmail vs Outlook?

Gmail and Outlook use completely different rendering engines. Outlook uses the Microsoft Word engine from 2007 (with very limited CSS support), while Gmail uses a browser-like renderer. Custom fonts from Google Fonts won't load in either client. Stick to system fonts and inline styles for consistent results.

How do I send a test Ghost newsletter before publishing?

In the Ghost editor, click the Publish button, then select "Send test email" before confirming delivery to your full list. This sends the email to your own admin address. Check it in multiple email clients, especially Outlook, before sending to subscribers.

Can I use HTML cards with custom CSS in Ghost newsletters?

You can, but only if the CSS is compatible with Juice and email clients. Use inline style="" attributes only — not <style> blocks. Avoid custom properties (var(--)), grid, animations, and modern selectors. Test with a single subscriber before sending to your list.

What does Ghost's email-only card do?

The email-only toggle lets you show or hide specific content blocks in the newsletter version of a post. Content marked as email-only won't appear on the web; web-only content won't appear in emails. It's useful for swapping complex web elements with simpler email-safe versions, but the email-only content still goes through the same Juice CSS inlining process.

How do I fix Ghost newsletters not sending to subscribers?

First check your email provider settings (Mailgun, SES, or SMTP) in Ghost admin. Then check Ghost logs for TypeError or Juice errors. If the issue is CSS-related, simplify your post content and remove HTML cards with modern CSS. If it's a provider issue, verify your API keys and sending domain configuration. The detailed CSS fix guide covers the most common scenario step by step.

Does switching from Mailgun fix email CSS problems in Ghost?

No. The CSS/Juice issue happens before Ghost contacts the mail provider. Switching to Amazon SES or another SMTP provider won't fix rendering problems — it only changes how the email is transmitted, not how it's constructed. The fix is always in the post's HTML content.

Why do Ghost posts look great on the website but broken in email?

Your Ghost theme's CSS supports modern browsers fully. When Ghost converts a post into a newsletter, it applies a separate, email-safe stylesheet and uses Juice to inline it. CSS that works in Chrome doesn't work in Outlook. Think of the email version as needing to support a browser from 2007 — that's essentially what Outlook's rendering engine is.