Find email HTML that Outlook or Gmail will break: clipping, div layout, missing alt and unsafe CSS

Email HTML lintFreeFor developers and designers

25/day

free runs a day, no sign-in.

Before: what you give it

The example input, as typed in. You paste text, CSS, markup or notes.

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>Your October receipt</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<style>.row{display:flex}.btn{background:#0a0a0a url(btn.png) no-repeat}@media (prefers-color-scheme: dark){.bg{background:#111!important}}</style></head>
<body style="margin:0;background:#ffffff">
<div style="display:none;max-height:0;overflow:hidden;opacity:0">Receipt for order 1042, total $48.00&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;</div>
...

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

Email lint: 1.2 KB, 1 tables, 1 images, 3 links, 133 chars of visible text.

- [high] display:flex found. Outlook for Windows ignores it; some other clients handle it unevenly. Columns collapse into a stack or break. Fix: Use tables for columns; reserve flex for progressive enhancement with a table fallback.
- [high] 1 of 1 image(s) have no alt attribute. With images blocked (the default in several clients), the reader sees a broken box, and screen readers read the file name. Fix: Add alt text, or alt="" for purely decorative images.
- [medium] Background image or gradient found. Outlook for Windows needs a VML fallback, and images may be blocked by default. Fix: Set a solid bgcolor fallback with readable text on it, add VML for Outlook, and do not put key text only on the image.
- [medium] Button-like link "Track it" is about 28px tall (padding 12px + line 16px). Touch guidance asks for roughly 44px (Apple) to 48px (Google). (a) Fix: Raise vertical padding or line-height to reach 44px.
- [low] No image sets display:block; inline images can leave gaps beneath them in some clients. Fix: Add style="display:block" to images that stand alone in a cell.
... full output on the tool page

What you get

Size, table and image counts, and findings by severity with a fix for each

What it cannot do

Static checks from our own client notes, which can drift; it does not render in real mail clients.

Who it is for

Developers
Designers

Free and Pro

Free	25 runs a day per IP address, up to 200,000 characters a run.
Pro	No daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called lint_email_html. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp

curl -X POST https://designers.allthepossibles.com/api/email-html-lint -H 'content-type: application/json' -d '{"html":"<!DOCTYPE html>\n<html lang=\"en\"><head><meta charset=\"utf-8\"><title>Your October receipt</title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<meta name=\"color-scheme\" content=\"light dark\">\n<style>.row{display:flex}.btn{background:#0a0a0a url(btn.png) no-repeat}@media (prefers-color-scheme: dark){.bg{background:#111!important}}</style></head>\n<body style=\"margin:0;background:#ffffff\">\n<div style=\"display:none;max-height:0;overflow:hidden;opacity:0\">Receipt for order 1042, total $48.00&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;</div>\n<table role=\"presentation\" width=\"640\" align=\"center\" style=\"width:640px\"><tr><td class=\"bg\" style=\"background-color:#ffffff;color:#777777;font-size:12px\">\n<img src=\"https://example.com/logo.png\" width=\"120\">\n<h1 style=\"font-size:22px\">Thanks for your order</h1>\n<p>Your total was $48.00. <a href=\"https://example.com/receipt\" style=\"color:#0a64d8;text-decoration:none\">click here</a></p>\n<a href=\"https://example.com/track\" style=\"display:inline-block;padding:6px 10px;background:#0a0a0a;color:#ffffff;font-size:13px\">Track it</a>\n<p style=\"font-size:11px\">Sent by Example Co. <a href=\"https://example.com/unsubscribe\">Unsubscribe</a></p>\n</td></tr></table></body></html>"}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

The email HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>Your October receipt</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<style>.row{display:flex}.btn{background:#0a0a0a url(btn.png) no-repeat}@media (prefers-color-scheme: dark){.bg{background:#111!important}}</style></head>
<body style="margin:0;background:#ffffff">
<div style="display:none;max-height:0;overflow:hidden;opacity:0">Receipt for order 1042, total $48.00&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;</div>
<table role="presentation" width="640" align="center" style="width:640px"><tr><td class="bg" style="background-color:#ffffff;color:#777777;font-size:12px">
<img src="https://example.com/logo.png" width="120">
<h1 style="font-size:22px">Thanks for your order</h1>
<p>Your total was $48.00. <a href="https://example.com/receipt" style="color:#0a64d8;text-decoration:none">click here</a></p>
<a href="https://example.com/track" style="display:inline-block;padding:6px 10px;background:#0a0a0a;color:#ffffff;font-size:13px">Track it</a>
<p style="font-size:11px">Sent by Example Co. <a href="https://example.com/unsubscribe">Unsubscribe</a></p>
</td></tr></table></body></html>