WebToolVerseWebToolVerse

Email Signature Generator

Runs in your browser — nothing uploaded

Design a professional HTML email signature with live preview. Generates inline-styled HTML compatible with Gmail, Outlook, and Apple Mail.

Your information

Style

Template

Accent colour

Live preview

From: you@example.com

Re: Following up

Thanks for your time — looking forward to connecting.

Fill in your name above to see the preview.

How to install

Gmail

Settings → See all settings → General → Signature → Create new → paste in the rich text area

Outlook

File → Options → Mail → Signatures → New → paste in the editor

Apple Mail

Mail → Settings → Signatures → + → paste

Runs entirely in your browser — nothing is uploaded

Next steps

Meta Tag Generator

Generate optimized meta tags that help your pages rank higher.

Lorem Ipsum Generator

Generate placeholder text for mockups and designs in one click.

Fake Data Generator

Create realistic names, emails, and addresses for testing.

Convert Word to PDF

Convert .docx files to PDF instantly — no Office needed.

View all tools →
Runs entirely in your browser. No uploads. Your files stay private.

How to Create a Professional Email Signature

Signature Generator builds an HTML fragment with all CSS declared inline (style attributes on each element rather than <style> blocks). This is mandatory because Gmail, Outlook desktop, and most enterprise mail clients strip head <style> tags during rendering, so any CSS rule that isn't inline simply doesn't apply. The tool generates the markup using template literals in JavaScript and exposes the raw HTML for copy-paste into your client's signature settings.
Layout uses tables rather than CSS flex or grid. Outlook for Windows renders HTML email through Microsoft Word's engine, which has limited and idiosyncratic flex/grid support. Tables remain the only layout primitive that survives intact across Outlook 2016+, Apple Mail, Gmail web, Yahoo, and most mobile clients.
Accent colors, font choice, and template variations swap discrete inline values into the template at generation time. There's no CSS variable indirection because Outlook on Windows doesn't resolve var() reliably — every color value is written out as a hex literal directly on the affected element.
Image rendering in email signatures has a major caveat: most clients block remote images by default until the recipient clicks 'Display images.' Logo URLs in your signature should point to a stable CDN with a small file size (under 50 KB) to avoid display issues and slow loads. Some users embed images as base64 data URIs, which works in Apple Mail but not Outlook desktop — this tool uses plain URL references for maximum compatibility.
Links in HTML signatures generate an extra step in some clients: Gmail and Outlook may show 'View entire message' for emails over 102 KB total, including the signature. Keeping the signature lean (under 5 KB of HTML) avoids triggering this clip threshold across an entire email thread.
Everything generates client-side in your browser. None of the name, title, phone, or email values you enter are sent to any server, logged, or persisted to localStorage. Refreshing the page resets the form, and the only copy of the generated HTML is the one you paste into your mail client.
Once installed in Gmail, Outlook, or Apple Mail, the signature is stored on your account or device, not by this tool. To update it later, regenerate the HTML here and replace the existing signature in your client's settings.

Common Use Cases

01

Professional outreach

Add a branded signature to cold sales, partnership, and PR emails for a polished first impression.

02

Customer support standardization

Give every support agent the same signature template with personalized name and ticket queue link.

03

Freelancer branding

Include name, title, portfolio URL, and accent color that matches your personal site.

04

Team brand consistency

Generate identical-format signatures for every team member with only name and role differing.

Frequently Asked Questions

Yes. The HTML uses inline styles and table-based layout, which render correctly in Gmail web, Outlook 2016+ desktop, Outlook on the web, Apple Mail, and most mobile clients. Specifically, no CSS feature that Outlook desktop fails to support (flex, grid, var(), <style> tags) is used.
Settings (gear icon) → See all settings → General → Signature → Create new. Click into the editor, paste the generated HTML, then save. Gmail renders HTML signatures including images, accent colors, and layout exactly as previewed.
File → Options → Mail → Signatures → New. Outlook's native signature editor is rich-text only, so paste the HTML into a browser, copy the rendered output, then paste that rich-text into Outlook's signature box. The styles will travel through the rich-text paste.
No. All HTML generation runs in your browser via template literals. The values you enter live in React state for the page session and aren't stored or transmitted.
Yes. Six preset accent colors are available, each written as inline hex values into the template. The accent affects border lines, link color, and section dividers depending on the chosen template.
Mostly yes, but most clients block remote images until the recipient clicks 'Display images.' Use a stable HTTPS URL on your own domain or a CDN, keep the file under 50 KB, and ensure the image has explicit width/height attributes (which the tool adds automatically).
Outlook for Windows renders email through Word's engine, which silently drops or alters certain CSS — margin values, line-height, and some font-family stacks can render differently. The generated templates avoid the worst offenders. If something still looks off, simplify by removing the logo or shortening text.
Base64 data URIs work in Apple Mail and Thunderbird but are stripped or shown as attachments by Outlook desktop. The tool uses URL references because they're the most universally supported approach. Host your logo on a public HTTPS endpoint.
Under 5 KB of HTML is a safe target. Gmail clips messages over 102 KB total, and a heavy signature accumulates across long threads. Stick to 4-5 lines of text, one logo, and a few social icons rather than a full marketing brochure.
The current templates include text links rather than icon images to maximize compatibility and minimize size. If you want icons, add them manually in your mail client's editor after pasting the base signature, using small (24x24 pixel) PNG or SVG files hosted on a CDN.

Advertisement