Build a clean HTML email signature that renders correctly in Gmail and Outlook.
Generated in your browser — your details stay on your device.
Why do email signatures use tables instead of modern CSS?
Outlook on Windows renders email with Microsoft Word’s engine, which ignores flexbox, grid and external stylesheets. Tables with inline styles are the only layout that renders reliably everywhere. Avoid images too — many clients block remote images, turning a logo into an empty box.
Understanding your result
Email HTML is stuck roughly two decades behind web HTML, and Outlook is the reason: on Windows it renders messages with Microsoft Word’s engine, which ignores flexbox, grid, external stylesheets and most modern CSS. Tables with inline styles are the reliable common denominator. Avoiding images matters just as much — many clients block remote images by default, so an image-based signature arrives as an empty box or a red X, and attaching the image instead makes every message carry a pointless attachment. Keep it short, too: four or five lines reads as professional, while a wall of contact details and legal text reads as noise and gets quoted back on every reply.
Formula and method
The signature is a single-row HTML table with an optional coloured cell as the accent bar and a content cell holding the text blocks. Every style is written inline on the element it applies to, because mail clients strip <style> blocks.
Assumptions and limitations
The layout is text-only: there is no logo or profile-photo upload, and no banner or disclaimer block. Only one layout is offered, adjustable by colour, font and the optional accent bar. Some corporate mail systems strip or rewrite HTML signatures entirely, and a few clients ignore certain inline styles, so send yourself a test message before rolling it out.
Worked example
A name, job title, company, email, phone, website and two social links produce a compact signature of roughly 1 KB with a blue accent bar, all links coloured to match.
How to use this tool
- Fill in the details you want to appear — blanks are simply left out.
- Pick an accent colour and a font.
- Copy the rendered preview and paste it into your mail client’s signature box.
- Send yourself a test email to check how it arrives.
Common mistakes to avoid
- Using an image for the whole signature, which blocks and breaks.
- Relying on modern CSS that Outlook silently ignores.
- Cramming in every social profile and a long legal disclaimer.
- Pasting the HTML code instead of the rendered preview into Gmail.
About the Email Signature Generator
The Email Signature Generator builds a professional HTML signature from your details. The markup uses tables and inline styles with no images, which is the only approach that renders reliably across Gmail, Outlook, Apple Mail and mobile clients.
Who should use this tool
Freelancers, employees and small businesses who want a tidy, consistent signature without paying for a signature service.
Benefits
- Table-based with inline styles — the only layout Outlook renders reliably.
- No images, so nothing breaks when a recipient blocks remote content.
- Phone and email become proper tel: and mailto: links.
- Your details are never uploaded or stored.
Practical use cases
- Setting up a signature in Gmail or Outlook.
- Giving a small team one consistent signature format.
- Refreshing a signature after a job title or company change.
- Replacing an image-based signature that keeps breaking.
Explore all Business and Ecommerce tools
Frequently asked questions
How do I add this to Gmail?
Open Settings, scroll to Signature, then paste the rendered preview — not the code — into the box and save. Gmail keeps the formatting.
Why are tables used instead of modern CSS?
Outlook on Windows renders email with Microsoft Word’s engine, which ignores flexbox, grid and external stylesheets. Tables with inline styles are what works everywhere.
Can I add my company logo?
Not with this tool. Images are deliberately avoided because many clients block remote images, which turns a logo into an empty box or a broken-image icon.
How long should a signature be?
Four or five lines. Name, role, company and one or two ways to reach you is plenty — every extra line gets quoted back on each reply in a thread.
Will it work on mobile?
Yes. The layout is a simple single-column table with no fixed widths, so it reflows naturally on small screens.