HTML Email Signature Generator

Enter your name, job title and contact details and get a compact signature with one accent colour, as a ready-to-paste preview and as raw HTML.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Signature preview

Signature HTML

<table cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#111827;border-collapse:collapse">
  <tr>
    <td style="border-left:3px solid #4f46e5;padding:4px 0 4px 14px">
      <div style="font-size:15px;font-weight:700;color:#111827">Jordan Lee</div>
      <div style="margin-top:2px;color:#4b5563">Marketing Manager · Acme Co</div>
      <div style="margin-top:6px;color:#4b5563">+1 (555) 010-0100 &nbsp;|&nbsp; <a href="mailto:jordan@acme.co" style="color:#4f46e5;text-decoration:none">jordan@acme.co</a> &nbsp;|&nbsp; <a href="https://acme.co" style="color:#4f46e5;text-decoration:none">https://acme.co</a></div>
      
    </td>
  </tr>
</table>

Gmail: Settings → See all settings → Signature → paste. Outlook: File → Options → Mail → Signatures → paste into the editor. If your mail client has no 'edit HTML' option, select and copy the rendered preview above instead of the code block — it carries the same formatting.

Quick answers

How do I add an HTML signature in Gmail?: Gmail has no box for raw HTML. Select the rendered Signature preview on this page, copy it, then in Gmail open Settings, See all settings, General, Signature, choose Create new, paste, and press Save Changes at the bottom of the page.
How do I add the signature in Outlook?: Copy the rendered preview. In classic Outlook for Windows go to File, Options, Mail, Signatures, choose New and paste into the editor. In new Outlook and Outlook on the web, open Settings, Accounts, Signatures, paste and save.
What should a professional email signature include?: Your full name, job title, company and one or two ways to reach you, normally a phone number and a website. Three or four lines is enough. Leave out quotes, multiple phone numbers and anything the reader will never use.
Should I copy the preview or the HTML code?: Copy the preview for Gmail, Outlook, Apple Mail and Yahoo Mail, whose signature editors take formatted text. Use the HTML code for clients with a raw HTML option, such as Thunderbird, or when handing the signature to an IT admin or CRM.
Do I need to create an account?: No. There is no sign-up, email gate or watermark. The signature is assembled in your browser from the fields on the page and the details are not sent to a server.
Can I add a logo or photo to the signature?: Not in this generator. It produces text and links only. Images in signatures must be hosted at a public address, are often blocked until the reader allows them, and can arrive as attachments, so a text signature is the most dependable choice.

About Email Signature Generator

Fill in eight fields and the tool builds a text-only signature: your name in bold, a job title and company line, a contact line with phone, email and website, and an optional tagline, all beside a thin vertical bar in your accent colour. You get two versions of the same thing. The rendered preview is what you select, copy and paste into Gmail, Outlook or Apple Mail. The HTML code is for clients and tools that accept markup directly, and it can be downloaded as email-signature.html. The markup is a single table with inline styles and no images, which is the form that displays consistently across mail apps. Only Full name is required, and nothing you type leaves your browser.

How to add the signature in Gmail, Outlook, Apple Mail and others

Menu paths for the main mail apps. Wording can shift slightly between versions.

Mail app	Where the signature setting is	What to paste
Gmail (web)	Settings (gear icon) > See all settings > General > Signature > Create new, then Save Changes	Rendered preview
Outlook for Windows (classic)	File > Options > Mail > Signatures > New	Rendered preview
New Outlook and Outlook on the web	Settings > Accounts > Signatures	Rendered preview
Apple Mail (Mac)	Mail > Settings > Signatures > + button. Untick Always match my default message font	Rendered preview
Yahoo Mail	Settings > More Settings > Writing email > Signature	Rendered preview
Thunderbird	Account Settings > select the account > tick Use HTML under Signature text	Signature HTML code

In Gmail, also set the signature under Signature defaults for new emails and for replies, or it will not be added automatically.

What each field adds to the signature

Field	Where it appears	Styling in the output
Full name (required)	First line	15 px, bold, near-black #111827
Job title	Second line, before the company	13 px, grey #4b5563
Company	Second line, after a middle dot	13 px, grey #4b5563
Phone	Contact line, first item	Plain text, grey #4b5563
Email	Contact line, second item	mailto link in the accent colour, no underline
Website	Contact line, third item	Link in the accent colour; https:// is added to the link if you leave it off
Tagline / disclaimer	Last line	Italic, light grey #9ca3af
Accent colour	3 px vertical bar on the left, and both links	Default #4f46e5

The whole signature uses the font stack Arial, Helvetica, sans-serif. Items on the contact line are separated by a vertical bar. Empty fields are left out along with their separators, and an empty line is removed entirely.

Example signatures and the text they produce

What the tool outputs for three sets of field values.

All default fields

Full name Jordan Lee, Job title Marketing Manager, Company Acme Co, Email jordan@acme.co, Phone +1 (555) 010-0100, Website https://acme.co

Line 1: Jordan Lee. Line 2: Marketing Manager · Acme Co. Line 3: +1 (555) 010-0100 | jordan@acme.co | https://acme.co

The email is a mailto link and the website links to https://acme.co.

Website without https and a tagline

Same as above, but Website acme.co and Tagline Sent from my desk

Line 3 shows acme.co as the link text and links to https://acme.co. Line 4: Sent from my desk, in italic grey

Name and email only

Full name Jordan Lee, Email jordan@acme.co, all other fields cleared

Line 1: Jordan Lee. Line 2: jordan@acme.co as a mailto link

The title line and tagline line are omitted, leaving a two-line signature.

Special characters in a name

Full name A & B <Ltd>, Company X

The code contains A & B <Ltd> so the name displays exactly as typed

Ampersands, angle brackets and quotation marks are escaped so they cannot break the markup.

Why the signature is a table with inline styles

Mail apps do not render HTML the way web browsers do. Classic Outlook for Windows lays out messages with the Microsoft Word engine, which ignores flexbox, grid and many other modern CSS features. Gmail and other webmail services rewrite or remove parts of the styling they receive. A layout that depends on a stylesheet or on modern CSS can therefore collapse or lose its spacing on the recipient's screen.

A plain table whose cells carry their own style attributes is the lowest common denominator that these apps all handle. The code from this page is one table with one cell, a left border for the accent bar and a few stacked lines of text. There are no classes, no external fonts, no scripts and no images to be blocked.

Because everything is text, the signature also stays readable when a recipient's mail app shows messages as plain text: the lines simply appear without colour or the side bar.

Email signature dos and don'ts

Keep it to three or four lines. Name, role and company, one contact line, and at most one extra line.
Choose an accent colour dark enough to read as link text on white. Pale yellows and light greys disappear.
Write phone numbers in international format, such as +1 or +44 with the area code, if you email people abroad.
Use the short form of your web address. Typing acme.co shows that text and still links to https://acme.co.
Do not repeat your email address if space is tight; the recipient already has it in the From line.
Put a legal disclaimer in the tagline field only if your organisation requires one, and keep it to a sentence.
Set a shorter version for replies and forwards if your mail app allows separate signatures.
Send a test to yourself and open it in at least one other mail app and on a phone before relying on it.

What this generator leaves out

There is one layout. You cannot switch templates, change the font or sizes, reorder the lines or add a second phone number, a postal address, pronouns or a booking link as separate fields. The tagline field is the place for one extra line of free text.

There are no logos, headshots, banners or social media icons. Adding those means hosting image files somewhere public and editing the downloaded HTML by hand to include an img tag.

The colours of the name and grey text are fixed for a white background. In a mail app's dark mode some clients invert them automatically and others do not, so check the test message in both modes if that matters to you.

Using Email Signature Generator

1
Enter your Full name, Job title and Company.
2
Add your Email, Phone and Website. Clear any field you do not want shown.
3
Pick an Accent colour for the side bar and the links, ideally your brand's hex code.
4
Add a Tagline / disclaimer (optional) if you need a final line in grey italic text.
5
Select the Signature preview with your mouse, copy it and paste it into your mail app's signature box, or copy the Signature HTML if your client accepts code.
6
Send yourself a test message and check it on a phone as well as a desktop.

Answers to common questions

Will the signature look the same in Outlook as in Gmail?

Very close. The table layout and inline styles are supported by both. Small differences in line spacing and in the exact rendering of Arial are normal.

Why did the formatting disappear when I pasted it?

You most likely pasted the code instead of the rendered preview, or pasted as plain text. Select the preview itself, copy, and use a normal paste rather than paste without formatting. Also check the mail app is composing in HTML or rich text mode, not plain text.

Is there a size limit for a Gmail signature?

Gmail limits signatures to 10,000 characters, counting the formatting behind the scenes. The signature from this page is far below that, at roughly 700 characters of HTML with all default fields filled.

Can I use the signature on my phone?

Signatures set on a desktop mail app do not always carry over. The Gmail mobile app has its own mobile signature setting, and the iPhone Mail app keeps a separate signature in Settings. Paste the preview there, or type a short text version.

How do I make the same signature for a whole team?

Agree one accent colour hex code and one way of writing titles and phone numbers, then have each person change only the personal fields. Sharing the downloaded HTML file as a starting point keeps the layout identical.

Can I edit the HTML afterwards?

Yes. The download is a small, readable file. You can change the font size values, the colours or the padding, or add another div line inside the table cell, then open the file in a browser and copy the rendered result.

Does the website field need https://?

No. If the address does not start with http:// or https://, the link is created with https:// in front while the visible text stays exactly as you typed it.

What accent colour should I choose?

Use your organisation's main brand colour if it is dark or saturated enough to read on white. If it is very light, pick a darker shade of the same hue so the email and website links remain legible.