Build a professional email signature with a live preview, then copy it straight into Gmail, Outlook, or Apple Mail.
Copy signature keeps links and layout — paste it into Gmail, Outlook, or Apple Mail. Copy HTML is for developers and template editors.
Preview approximates a desktop client. Send yourself a test email before rolling it out — mobile and dark mode can still shift spacing.
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;width:100%;max-width:520px;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:1.55;color:#334155;">
<tr>
<td style="padding:2px 0 2px 14px;border-left:3px solid #4f46e5;">
<div style="font-size:18px;font-weight:700;line-height:1.25;color:#0f172a;">Jordan Ellis</div>
<div style="margin-top:3px;font-size:12.5px;line-height:1.5;color:#475569;">Senior Product Designer · Northwind Studio</div>
<div style="margin-top:5px;font-size:12.5px;line-height:1.6;color:#64748b;font-style:italic;">Designing calm, useful products.</div>
<div style="margin-top:8px;font-size:12.5px;line-height:1.75;color:#475569;"><a href="mailto:[email protected]" style="color:#334155;text-decoration:none;">[email protected]</a> <span style="color:#cbd5e1;padding:0 2px;">|</span> <a href="tel:+14155550142" style="color:#334155;text-decoration:none;">+1 (415) 555-0142</a> <span style="color:#cbd5e1;padding:0 2px;">|</span> <a href="https://northwindstudio.com/" target="_blank" rel="noopener noreferrer" style="color:#4f46e5;text-decoration:none;">northwindstudio.com</a> <span style="color:#cbd5e1;padding:0 2px;">|</span> <span style="color:#475569;">San Francisco, CA</span></div>
<div style="margin-top:5px;font-size:12px;line-height:1.7;"><a href="https://www.linkedin.com/in/jordanellis" target="_blank" rel="noopener noreferrer" style="color:#4f46e5;text-decoration:none;">LinkedIn</a> <span style="color:#cbd5e1;padding:0 2px;">·</span> <a href="https://x.com/jordanellis" target="_blank" rel="noopener noreferrer" style="color:#4f46e5;text-decoration:none;">X / Twitter</a></div>
</td>
</tr>
</table>Email clients render HTML differently and may strip styles or block remote images. The generated HTML uses tables and inline CSS for broad compatibility, but send yourself a test message before rolling it out. Your details never leave this browser; the optional logo URL is only embedded in the generated code.
Email is not a web page. Outlook renders signatures with Microsoft Word, Gmail filters some styles, and mobile clients reflow everything narrower than the screen. The fix is boring HTML: tables, inline styles, and system fonts. That is exactly what this generator produces.
Everything inside the card is one table cell with inline styles: an accent rule, a stacked identity block, contact rows, and plain-text social links. The monogram stands in when a logo image is blocked.
Set it on the web. The Gmail mobile app may show a simplified version.
Outlook desktop uses Word rendering — this table layout is built for it.
Test on an iPhone as well; mobile Mail can shrink wide signatures.
| Risk | What happens | What this generator does |
|---|---|---|
| Flexbox or grid | Outlook desktop ignores modern layout and collapses the signature. | Uses a single table cell with padding. |
| External CSS or class names | Gmail and Outlook strip <style> blocks and unknown classes. | Writes every style inline on the element. |
| Web fonts | Recipients see a fallback, or text reflows at a different width. | Offers six email-safe system fonts. |
| Remote images | Many clients block images until the recipient allows them. | Logo is optional; a colored monogram is the fallback. |
| Icon fonts or SVG socials | They often render blank inside a signature. | Uses plain text links instead. |
| Dark mode inversion | Some clients invert light text and colored panels. | Neutral layouts by default; test Bold before rollout. |
The trade-off is deliberate: fewer visual effects, more consistent rendering. Send yourself a test email before you roll a signature out to a team.
The sample signature uses an accent rule, a 520 px maximum width, and the details below.
Create a professional email signature for Gmail, Outlook, or Apple Mail. Four templates, live preview, rich-text copy, and HTML download. Free and private.
An email signature has one job: make it easy for the recipient to know who you are and how to reach you. The best signatures are short, scannable, and consistent with the company brand. Start with your name, role, and company; add an email address, phone number, and website if they are useful; then stop. A tagline can work for client-facing roles, but it should be one short line rather than a paragraph. Social links are helpful when you actually use the platform professionally — a dead or rarely updated profile is worse than no link. Avoid stuffing the block with awards, quotes, banners, and legal boilerplate. Those elements make the signature taller, harder to read on a phone, and more likely to break in a client that strips images or styles. Keep the visual hierarchy simple and let the name carry the most weight.
The signature is generated as a single table with inline styles, the same approach professional email templates use. Tables are supported by every major client, including Outlook desktop, which ignores flexbox and grid. Every color, font size, and spacing value is written directly on the element, so the signature still looks right when a client strips embedded style blocks. Fonts come from a list of web-safe stacks — Arial, Helvetica, Verdana, Tahoma, Trebuchet MS, and Georgia — so text does not reflow when a custom font fails to load. Social profiles are plain text links rather than icon images, which means they remain clickable even when remote images are blocked. If you leave the logo field blank, the Modern template renders a colored monogram from your initials; that monogram is pure HTML and CSS, so it cannot be blocked. The generated code contains no scripts, no forms, and no tracking pixels.
In Gmail, go to Settings → See all settings → General → Signature, create a new signature, paste the copied block, and save. In Outlook desktop, open File → Options → Mail → Signatures; in Outlook on the web, use Settings → Mail → Compose and reply → Email signature. In Apple Mail, open Mail → Settings → Signatures, add a signature for the account, paste, and uncheck “Always match my default message font” so the formatting survives. Thunderbird users can enable “Use HTML” in Account Settings → Identity and paste into the signature box. After installing, send a test message to yourself and open it on both desktop and mobile. Click every link, confirm the logo loads if you used one, and check that the signature does not wrap awkwardly at narrow widths.
The most common mistake is treating a signature like a landing page: multiple banners, oversized logos, animated images, and a wall of social icons. Image-heavy signatures often arrive with broken placeholders, and they can push a short reply into a long scroll on a phone. Another mistake is relying on a font or color that only exists on your computer; the recipient sees a fallback, and sometimes a completely different width. Avoid hard-coding a fixed width larger than about 520 pixels, because narrow preview panes and mobile clients will clip or reflow it. Keep links to a minimum and make sure each one points to a current profile. Finally, update the signature when your title, phone number, or company changes — a stale signature is a small but visible credibility problem. Use the live preview in this tool, then verify in your actual email client before sharing it with a team.
On a computer, open Gmail and click Settings → See all settings → General. Scroll to Signature, choose Create new, paste the copied signature with Ctrl/Cmd + V, and click Save changes at the bottom. Open a new message to check the links and spacing. Setting it on the web is the most reliable option; the Gmail mobile app often shows a simplified version and may not preserve custom formatting.
In Outlook for Windows or Microsoft 365 desktop, open File → Options → Mail → Signatures, create a new signature, paste the copied block, set it as the default for new messages and replies, then click OK. In Outlook on the web, open Settings → Mail → Compose and reply → Email signature, paste, and save. Outlook desktop uses Microsoft Word to render messages, which is why this generator uses tables and inline CSS instead of modern web layout.
Every client renders HTML with its own engine. Outlook desktop uses Word, Gmail removes some style rules, Apple Mail and mobile apps reflow narrow layouts, and many clients block remote images until the recipient allows them. Dark mode can also invert colors and backgrounds. This generator avoids the most fragile techniques — flexbox, grid, external CSS, web fonts, SVG icons, and scripts — but no HTML will render pixel-identically everywhere. Always send yourself a test email and check it on a phone before rolling it out.
A logo can reinforce branding, but remote images are often blocked by default, so some recipients will see a blank box. This generator makes the logo optional and falls back to a colored monogram built from your initials, which always renders. If you do use an image, host it at a public HTTPS URL, keep it small (under roughly 50 KB), and set fixed width and height attributes so the signature does not jump while images load. For privacy, avoid embedding a personal photo unless your organization expects it.
At minimum: your name, role, company, and one reliable contact method. A website, phone number, and one or two relevant social links are enough for most people. Keep the whole block to about four to six lines. Skip inspirational quotes, oversized legal disclaimers, multiple logos, and every social network you have ever joined — they add visual noise and make the signature fragile across clients. If you work for a regulated firm, follow your compliance team’s required wording, which overrides design preferences.
Yes. The tool is completely free, requires no signup, and runs entirely in your browser. Your name, email address, phone number, social links, and logo URL are never uploaded or stored on a server. Copying uses your browser’s clipboard; downloading produces a local HTML file. The generated signature contains no scripts, forms, or tracking pixels, and the optional logo URL is only embedded in the code you copy or download.
What do you call a pig that knows karate?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.