HTML Email Signature Generator

Outlook renders HTML email through Word’s layout engine, not a browser engine, which means it ignores flexbox, most CSS classes, and anything defined in a <style> block. A signature built with modern CSS looks fine in Gmail and breaks silently in Outlook — margins collapse, colors vanish, the two-column layout stacks into one. This tool only ever outputs a single <table> with inline styles, the one markup shape every major email client still renders consistently.

Fill in a name and whichever contact fields apply; every blank field is left out of the output rather than rendered as an empty line. Pick an accent color for the name and links, or type a hex value directly. The live preview and the copyable HTML update as you type.

Worked Example: A Complete Contact Card

Click Load Sample and the form fills with Priya Ramanathan, Senior Product Designer at Northwind Studio, plus a phone number, email, website and LinkedIn URL, all under a blue #2563EB accent. Click it 3 more times and the fourth entry, Devon Clarke, has no company and no phone: the generated signature shows only the name, job title, email and website, with no gap where the missing fields would have been.

Format Notes: Why a Table, Not Flexbox

• Every color, spacing, and font value is written inline as a style attribute on the exact element it affects, because Outlook strips a <style> block entirely and several other clients strip external stylesheets on paste.
• Website and LinkedIn URLs typed without a scheme are corrected automatically: entering northwindstudio.example outputs href="https://northwindstudio.example", so a signature never ships a broken relative link.
• Name, job title, and company are HTML-escaped before insertion — an ampersand in a company name like “Kiln & Co.” becomes & in the output, so the generated table always parses as valid HTML no matter what you type.

Accuracy Limits: One Layout, Not Every Client

• An email address that fails a basic name@domain.tld pattern shows “Enter a valid email address.” rather than shipping a broken mailto: link.
• An accent color must be a 3- or 6-digit hex value; anything else shows “Enter a valid hex color like #2563EB.” and the generator falls back to the platform’s default terracotta rather than emitting invalid CSS.
• Some mobile mail apps clip an inline photo or logo automatically inserted into a signature, so this tool deliberately omits an image field; paste one into the copied HTML by hand if your client supports it reliably.