liminfo

Email Signature Generator

Free web tool: Email Signature Generator

Preview

John Doe
Software Engineer
Acme Inc.
+1 (555) 123-4567

HTML Code

<table cellpadding="0" cellspacing="0" style="font-family:Arial,sans-serif;font-size:13px;color:#333">
  <tr>
    <td style="padding-right:15px;border-right:2px solid #0066cc">
      <div style="font-weight:bold;font-size:16px;color:#0066cc">John Doe</div>
      <div style="color:#666;margin-top:2px">Software Engineer</div>
      <div style="font-weight:600;margin-top:2px">Acme Inc.</div>
    </td>
    <td style="padding-left:15px">
      <div><a href="mailto:john@acme.com" style="color:#0066cc;text-decoration:none">john@acme.com</a></div>
      <div style="margin-top:2px">+1 (555) 123-4567</div>
      <div style="margin-top:2px"><a href="https://acme.com" style="color:#0066cc;text-decoration:none">acme.com</a></div>
    </td>
  </tr>
</table>

About Email Signature Generator

The Email Signature Generator creates professional HTML email signatures from six input fields — name, job title, company, email address, phone number, and website URL. The generated HTML uses inline CSS with table-based layouts for maximum email client compatibility across Gmail, Outlook, Apple Mail, and Thunderbird.

Three distinct templates are available: Minimal (single-column, pipe-separated contact info), Professional (two-column layout with a 2px blue accent border divider), and Modern (bold typography with letter-spacing, uppercase subtitle, and a 3px bottom border with centered dot-separated links). Each template outputs clean, copy-ready HTML code.

All signature generation happens entirely in your browser using React state and useMemo for real-time preview updates. The HTML source code is displayed with syntax highlighting and can be copied to clipboard with one click. No data is sent to any server.

Key Features

  • Three HTML email signature templates: Minimal, Professional (two-column with blue border), and Modern (uppercase tracking)
  • Six customizable fields: name, job title, company, email, phone, and website URL
  • Inline CSS with table-based layout ensuring compatibility with Gmail, Outlook, Apple Mail, and Thunderbird
  • Real-time live preview that updates instantly as you type in any field
  • One-click HTML source code copy to clipboard with syntax-highlighted code display
  • Professional template features a 2px blue (#0066cc) accent border with left/right column separation
  • Modern template uses Helvetica Neue font stack with -0.5px letter-spacing and uppercase subtitle formatting
  • Protocol-stripped website display (removes http:// and https://) for cleaner visual presentation

Frequently Asked Questions

What email signature templates are available?

Three templates are provided: Minimal — a simple single-column layout with pipe-separated contact details; Professional — a two-column layout divided by a 2px solid blue (#0066cc) border with name and title on the left, contact info on the right; and Modern — a bold typographic design with 18px name, uppercase letter-spaced subtitle, and a 3px black top border above dot-separated contact links.

Will the generated HTML signature work in Gmail and Outlook?

Yes. All templates use table-based HTML layouts with inline CSS styles, which is the industry-standard approach for maximum email client compatibility. Table cellpadding and cellspacing are set to zero, and all styling is applied directly to elements rather than using external stylesheets or CSS classes that email clients strip out.

How do I add the generated signature to my email client?

Click the Copy button to copy the HTML source code. In Gmail, go to Settings > Signature and paste the HTML. In Outlook, navigate to File > Options > Mail > Signatures. For Apple Mail, you can create a new signature in Mail > Preferences > Signatures. Some clients may require pasting the rendered preview rather than the HTML code.

Can I customize the colors in the email signature?

The Professional template uses #0066cc as its accent color for the border divider and linked text. The Modern template uses #111 for borders and link colors. While the generator does not include a color picker, you can copy the HTML code and modify the hex color values directly in the source before pasting into your email client.

What font families do the templates use?

The Minimal and Professional templates use the Arial sans-serif font stack (font-family: Arial, sans-serif) at 13px base size. The Modern template uses a Helvetica Neue stack (font-family: Helvetica Neue, Helvetica, Arial, sans-serif) with tighter letter-spacing (-0.5px) for a contemporary typographic feel.

Is the website URL displayed with the full protocol?

No. The generator automatically strips the http:// or https:// protocol prefix from the displayed website text using a regex replacement, while preserving the full URL in the underlying href link. This creates a cleaner visual appearance like "acme.com" while maintaining the correct clickable link.

Are optional fields handled gracefully?

Yes. Each template conditionally renders fields — if you leave the company field empty, the pipe separator or dash is omitted. If the website field is blank, that row is not rendered at all. The Minimal template joins non-empty contact items with pipe separators, and the Modern template uses middle-dot separators, both filtering out empty values.

Does the signature generator store my personal information?

No. All processing happens entirely in your browser using React component state. Your name, email, phone, and other details are never transmitted to any server, stored in any database, or logged anywhere. The HTML is generated client-side in real time using JavaScript template literals.