Inspect the code before pasting
Useful when the signature has to move through an IT or operations handoff instead of a one-click install.
Email tool page
HTML Email Signature Generator
Generate inline HTML for an email signature, review the markup, and copy or download the final signature block.
Some users do not just need the preview. They need the markup itself. This page keeps the HTML visible so it is easy to inspect, copy, and hand off.
- Inline HTML shown on the page
- Copy or download the generated markup
- Useful for manual handoff and QA
- Built around email-safe structural patterns
Builder
Create the signature block first
Use this page when the HTML itself is the deliverable, whether for QA, manual installation, or a handoff to another team.
Accent
Builder notes
- Verify every URL before you hand the markup off.
- Keep the structure compact even when the code is technically valid.
- Download the HTML if the signature needs review outside the browser.
HTML output
Copy-ready signature markup
Use the buttons below when you need to paste the signature into a client or hand the HTML to someone else.
<!-- Signature Maker email signature -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width: 560px; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; color: #172033;">
<tr>
<td style="padding: 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width: 100%; border-collapse: collapse; border-top: 3px solid #a54f31; background: #ffffff;">
<tr>
<td style="padding: 18px 0 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
<tr>
<td style="vertical-align: top;">
<div style="font-size: 20px; line-height: 26px; font-weight: 700; color: #172033;">
Morgan Ellis
</div>
<div style="padding-top: 5px; font-size: 13px; line-height: 19px; color: #536076;">Founder · Elm Harbor</div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top: 12px; border-collapse: collapse;">
<tr>
<td style="padding: 0 0 6px; font-size: 13px; line-height: 20px; color: #536076;">
<span style="display: inline-block; min-width: 54px; font-weight: 700; color: #a54f31;">Email</span>
<a href="mailto:morgan@elmharbor.com" style="color: #172033; text-decoration: none;">morgan@elmharbor.com</a>
</td>
</tr>
<tr>
<td style="padding: 0 0 6px; font-size: 13px; line-height: 20px; color: #536076;">
<span style="display: inline-block; min-width: 54px; font-weight: 700; color: #a54f31;">Phone</span>
<a href="tel:+13105550114" style="color: #172033; text-decoration: none;">+1 (310) 555-0114</a>
</td>
</tr>
<tr>
<td style="padding: 0 0 6px; font-size: 13px; line-height: 20px; color: #536076;">
<span style="display: inline-block; min-width: 54px; font-weight: 700; color: #a54f31;">Web</span>
<a href="https://elmharbor.com" style="color: #172033; text-decoration: none;">elmharbor.com</a>
</td>
</tr>
</table>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top: 14px; border-collapse: collapse;">
<tr>
<td style="border-radius: 999px; background: #a54f31;">
<a href="https://elmharbor.com/work" style="display: inline-block; padding: 10px 14px; color: #fffaf5; font-size: 13px; font-weight: 700; text-decoration: none;">
View portfolio
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>Live preview
Email signature preview
Check the layout at both a generous width and a tighter mobile-like width before installing it.
Desktop width
|
Narrow width
|
How to use it
Keep the signature block useful, not oversized
- Enter the sender details and keep the layout concise before worrying about code.
- Inspect the generated inline HTML to confirm the links, order, and structure make sense.
- Copy the markup or download the HTML file for manual installation or team review.
Best uses
Where this workflow fits best
Verify the final links
The visible HTML makes it easier to confirm email, phone, CTA, and website destinations before rollout.
Keep a downloadable snippet
A saved HTML file makes it easier to reuse the signature or hand it to someone else without rebuilding it.
Next step
Installation guides
How to Add a Signature to GmailGenerate a clean signature PNG, upload it to Gmail, and keep the sign-off compact and readable in outgoing email.How to Add a Signature to OutlookCreate a compact email signature, paste or install it in Outlook, and verify that the layout stays clean in new messages and replies.
Decision support
Compare the workflow before you commit
Signature Generator vs WiseStampCompare Signature Maker's lightweight signature asset and email-signature builder with WiseStamp's full email-signature platform for templates, installs, and company-wide management.Signature Generator vs MySignatureCompare Signature Maker's faster signature workflow with MySignature's template-driven email signature platform for branding, analytics, and team management.
FAQ
Answers for the exact email-signature task
Why show the HTML on the page?
Because some teams need to review the markup directly before installing or distributing it. The code view removes guesswork from that handoff.
Is the markup meant to be edited manually?
Usually no. The builder is easier and safer for most edits. The code view is there for inspection, copying, and operational handoff.
Can I still use this if I only want Gmail or Outlook?
Yes. The HTML page is the markup-focused variant, while the Gmail and Outlook pages keep the copy and guidance centered on those specific clients.